使用pdf.js插件与LODOP控件实现前端浏览器静默打印PDF文件

最新推荐文章于 2024-05-29 12:40:38 发布

gajicat

最新推荐文章于 2024-05-29 12:40:38 发布

阅读量1.5w

点赞数 7

分类专栏：工作日志文章标签： pdf 浏览器打印 LODOP pdf.js 智能终端

本文链接：https://blog.csdn.net/gajicat/article/details/89257941

版权

工作日志专栏收录该内容

8 篇文章 1 订阅

订阅专栏

任务： 作为智能终端自助打印系统的一部分，需在前端浏览器打印从服务端获取的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();
    		//返回jobId
    		return 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();
    		//返回jobId
    		return prt;
    	  }
    </script>

源码: 码云

gajicat

关注

7
点赞
踩
40

收藏

觉得还不错? 一键收藏
3
评论
使用pdf.js插件与LODOP控件实现前端浏览器静默打印PDF文件

**任务：**作为智能终端自助打印系统的一部分，需在前端浏览器打印从服务端获取的Base64编码形式的pdf文件。**实现原理：**页面javaScrip通过atob函数将服务端获取的base64编码转换为pdf文件对象，使用pdf.js API加载到页面元素，转为png图片的Base64编码，调用LODOP控件预览打印或直接打印。**运行环境：**Firefox，IE，Chrome**编码...
复制链接

扫一扫

专栏目录