jspdf

JSP页面导出PDF格式文件

梦想的初衷 提交于 2020-08-11 21:57:55
JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 添加下载链接的点击事件 <script type="text/javascript"> var downPdf = document.getElementById("downLoad"); downPdf.onclick = function() { downPdf.parentNode.removeChild(downPdf); html2canvas(document.body, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; /

将HTML页面自动保存为PDF文件并上传的两种方式(一)-前端(react)方式

╄→尐↘猪︶ㄣ 提交于 2020-08-11 21:40:36
一、业务场景   公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑)。 二、原来的实现形式   浏览器原生方法: window.print()可以将网页保存为PDF文件 ,由于检测报告的网页已经调整为A4的样式,所以保存下来后即是一个标准的PDF文档,然后将保存下来的PDF文件上传到服务器,即可实现需求。 三、存在的问题   调用window.print()方法后 需要手动保存PDF到本地,然后手动上传到服务器。 所以本文的目的是点击上传PDF后 自动 将网页生成PDF,然后自动上传到服务器, 省略操作者手动保存、手动上传这两个步骤 。 四、解决方法   根据“自动”这个需求,找到了两种实现方式: 纯前端方式 ,前端生成pdf后通过接口上传到服务器 后端(node)方式 ,通过另起一个node服务来生成pdf并上传( 推荐,以后介绍 ) 四、纯前端方法   前端采用了 React 框架。另需要 html2canvas , jspdf 两个库。   1、场景1-上传一个尚未打开的React页面,这种情况下需要将需要上传的页面通过iframe以visiblity:hidden的形式打开或者被遮挡在看不到的地方,不可以display:none