任务：作为智能终端自助打印系统的一部分，需在前端浏览器打印从服务端获取的Base64编码形式的pdf文件。
实现原理：页面javaScrip通过atob函数将服务端获取的base64编码转换为pdf文件对象，使用pdf.js API加载到<canvas>页面元素，转为png图片的Base64编码，调用LODOP控件预览打印或直接打印。
运行环境：Firefox，IE，Chrome
编码语言：JavaScript html5
插件介绍：
pdf.js插件：前端页面纯js查看与打印插件。提供多种API用于pdf文件的加载与展示。
LODOP自助打印控件：可代码定制化的打印控件，需在前端windows系统作为第三方软件安装。
1. 配置pdf.js环境。
将pdf.js版本pdfjs-1.5.188-dist解压，其下有两个文件夹build与web，拷贝到项目路径中。
pdfjs├── build -│├─ pdf.js│└─ pdf.worker.js├── web +└── LICENSE
A. 页面中导入build文件夹下两个js文件：
<!-- 将pdf转为canvas元素的工具 --><script type="text/javascript" src="pdfjs/build/pdf.js"></script><script type="text/javascript" src="pdfjs/web/compatibility.js"></script>
B. <body>中放置一个隐藏的canvas元素
<canvas id="thepdfcanvas2" style="border:1px solid black;display:none;"></canvas>
C.初始化pdf.js工具
<script>PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js'; </script>
2.安装并配置LODOP打印控件
A. 在需要静默打印的前端系统安装LODOP控件。（见LODOP官网）
B. 在项目路径中放置LODOP提供的LodopFuncs.js文件
lodop└── LodopFuncs.js
C. 页面 <head> 添加LODOP插件：
<!--兼容IE，火狐，谷歌--><script language="javascript" src="lodop/LodopFuncs.js"></script><!--兼容IE需要添加object元素，火狐，谷歌不需要--><object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0"> <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0"></embed></object><!--LODOP打印控件初始化--><script type="text/javascript">var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));</script>
3.调用打印流程
A. pdf文件Base64编码转换为pdf文件对象
<script>var pdfData = atob(base64str);/*/base64str: ajax获取到的pdf文件的Base64编码pdfData: atob生成的pdf文件数据。atob函数只在火狐浏览器中有效。如果从本地打开pdf文件，可以省略这一步*/</script>
B. 调用pdf.js API将pdf文件对象加载到 <canvas> 元素
<script>//从pdf文件对象逐页获取page，并调用toImageAndPrint函数打印内容PDFJS.getDocument({data: pdfData}).then(function getPdfHelloWorld(pdf) {//此处适用pdf只有一个page情况pdf.getPage(1).then(function getPageHelloWorld(page) {//scale调节生成的画布图片大小，与清晰度有关，需要调整。var scale = 1.5;var viewport = page.getViewport(scale);//将生成的page对象加载到canvas中var canvas = document.getElementById('thepdfcanvas2');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport};//此处开始画画布page.render(renderContext).promise.then(function(){//回调函数，此处画布已加载完，调用后续的打印或预览函数toImageAndPrint(); //直接打印//toImageAndPreview() //预览打印});});});</script>
C. 打印函数 / 预览函数（见步骤B），调用LODOP控件打印Base64图片
<script>//直接打印function toImageAndPrint(){//<canvas> 元素转换为.png图片的BASE64编码var canvasEle = document.getElementById("thepdfcanvas2");var dataUrl = canvasEle.toDataURL();//打印初始化LODOP.PRINT_INIT("");//设置纸张类型，打印风格等LODOP.SET_PRINT_PAGESIZE(1, 0,0,"A5");LODOP.SET_PRINT_STYLE("Stretch",2);//设置边距，传入待打印图片的base64编码LODOP.ADD_PRINT_IMAGE("0mm","0mm","RightMargin:0mm","BottomMargin:0mm",dataUrl);//设置对后台打印状态进行捕获LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS",true);//打印var prt = LODOP.PRINT();//返回jobIdreturn prt;}//预览打印function toImageAndPreview(){//<canvas> 元素转换为.png图片的BASE64编码var canvasEle = document.getElementById("thepdfcanvas2");var dataUrl = canvasEle.toDataURL();//打印初始化LODOP.PRINT_INIT("");//设置纸张类型，打印风格等LODOP.SET_PRINT_PAGESIZE(1, 0,0,"A5");LODOP.SET_PRINT_STYLE("Stretch",2);//设置边距，传入待打印图片的base64编码LODOP.ADD_PRINT_IMAGE("0mm","0mm","RightMargin:0mm","BottomMargin:0mm",dataUrl);//设置对后台打印状态进行捕获LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS",true);//预览var prt = LODOP.PREVIEW();//返回jobIdreturn prt;}</script>
源码:码云
