Felix.Li 发表于 2023-3-27 12:25:45

AR-web端实现静默打印(无预览打印)

本帖最后由 Felix.Li 于 2023-3-27 14:01 编辑

AR-web端最新的静默打印教程来了。
很多时候,我们希望页面上不预览报表,只有一个按钮,点击按钮后就直接打印机打印,那最新的教程来了

首先说一下思路:
AR web端的报表也是基于浏览器打开的,页面也需要被初始化,用初始化的对象进行导出打印。所以实现不预览就是利用CSS将预览的标签隐藏。
这里使用的方法是将对应的标签 display设置为none
其次,我们打印的思路是前端浏览器加载完成报表后直接默认调用导出接口。然后将导出的文件传递给一个后端exe应用。后端的exe负责打印

那说完这些直接上代码,代码原始是基于我们的git示例代码:
https://github.com/activereports ... s/JSViewer_MVC_Core

index.html:
var viewer;

      function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                renderFormat: 'html',
                documentLoaded: () => {
                  viewer.export('Pdf', (url) => silentPrint(url), false, { silentPrint: true })
                }
            });
            populateReports();
      }

      function silentPrint(uri) {

            fetch(uri).then(result => {

                return result.blob()
            }).then(result => {
                let formData = new FormData();
                formData.append("file", result);
                fetch("http://127.0.0.1:8088/print", {
                  method: 'POST',
                  mode: 'cors',
                  body: formData
                })
            })
      };上述就是AR初始化和定义文档导出的代码了,然后就是将标签 #viewerContainer的display设置为none
那我们在相关按钮点击的时候执行   viewer.open("报表名称") 就可以了
上述可以看到,我们将导出的PDF传递给8088端口的print接口
那这个就是我们的后端服务了。

主要是连个exe文件,我们手动运行   PrintAgent.exe就可以。浏览器最终调用的也是这个接口

看一下实际效果吧:

因为服务端的exe是调用本地服务器的默认浏览器,而视频中的是ToPDF,所以直接打印pdf。

具体可以参考一下Demo

exe:



将两个exe放置在相同目录下,运行PrintAgent.exe
然后运行AR示例Demo即可

PrintAgent源码如下:可自行修改端口:






页: [1]
查看完整版本: AR-web端实现静默打印(无预览打印)