HTML页面导出PDF——高清版
程序员文章站
2022-06-29 07:54:52
需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导出的差不多,很清晰。 首先用到的JS有: 代码: ......
需要做一个导出pdf的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的pdf都是几m,跟正常手动导出的差不多,很清晰。
首先用到的js有:
<script type="text/javascript" charset="utf-8" src="js/html2canvas.js"></script> <script type="text/javascript" charset="utf-8" src="js/jspdf.debug.js"></script> <script type="text/javascript" charset="utf-8" src="js/canvas2image.js"></script>
代码:
<script> function exportreporttemplet() { var element = $("#print"); // 这个dom元素是要导出pdf的div容器 var w = element.width(); // 获得该容器的宽 var h = element.height(); // 获得该容器的高 var offsettop = element.offset().top; // 获得该容器到文档顶部的距离 var offsetleft = element.offset().left; // 获得该容器到文档最左的距离 var canvas = document.createelement("canvas"); canvas.width = w * 2; // 将画布宽&&高放大两倍 canvas.height = h * 2; var context = canvas.getcontext("2d"); var scale = 2; context.scale(2, 2); // context.translate(-offsetleft - abs, -offsettop); var opts = { scale: scale, canvas: canvas, width: w, height: h, usecors: true, background: '#fff' } html2canvas(element, opts).then(function (canvas) { allowtaint: false; tainttest: false; var contentwidth = canvas.width; var contentheight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageheight = contentwidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftheight = contentheight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgwidth = 595.28; var imgheight = 592.28 / contentwidth * contentheight; var pagedata = canvas.todataurl('image/jpeg', 1.0); // var ocanvas = document.getelementbyid("print"); // canvas2image.saveasjpeg(ocanvas); var pdf = new jspdf('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftheight < pageheight) { pdf.addimage(pagedata, 'jpeg', 0, 0, imgwidth, imgheight); } else { // 分页 while (leftheight > 0) { pdf.addimage(pagedata, 'jpeg', 0, position, imgwidth, imgheight) leftheight -= pageheight; position -= 841.89; //避免添加空白页 if (leftheight > 0) { pdf.addpage(); } } } pdf.save('销售合同.pdf'); }) } </script>
上一篇: Matlab命令模式
下一篇: git 使用命令