[转]JS导出PDF

通过纯js将网页保存为pdf，A4分页，无需服务端参与

1.引入js库文件：

<script src="../static/jspdf/html2canvas.js"></script><script src="../static/jspdf/jsPdf.debug.js"></script>

2.思路：

用html2canvas截取页面（html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来），然后用jsPDF来生成pdf文件。

3.核心代码：

为了保证生成的pdf空白区域没有黑色背景，在操作之前先把背景设置为白色（因为沒有背景色，截取时会以黑色填充）

$("#"+divID).css("background-color","white");

解决html2canvas截取页面太模糊，创建一个新的canvas：


var canvas_new = document.createElement("canvas");var scale = 2;var w = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).width);var h = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).height);

将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了：

canvas_new.width = w * scale;canvas_new.height = h * scale;canvas_new.getContext("2d").scale(scale, scale);

进行导出：

var options = {canvas: canvas_new};html2canvas(document.querySelector("#"+divID),options)..then(function(canvas) {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+45;var pageData = canvas.toDataURL('image/jpeg', 1.0);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('name.pdf');

---------------------
作者：致虚极POLE守静笃
来源：CSDN
原文：https://blog.csdn.net/u011821334/article/details/79389426
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件

[转]JS导出PDF相关推荐

JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
js 导出pdf上传至oss_js实现oss文件上传及一些问题
关于兼容性问题,ie8以下的可以使用4.x的版本一.引入sdk和jq 二.基本配置 var client =newOSS.Wrapper({ region:'', accessKeyId:'', a ...
js 导出pdf上传至oss_前端上传图片到oss，压缩图片后上传至oss（补充图片文件旋转90度问题）...
上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度. /** * 压缩图片 * @param file 图片文件 * @param callback 回调函数,压缩完要 ...
js导出生成PDF插件
js导出生成PDF插件[jsPDF] 插件官网:http://parall.ax/products/jspdf 浏览器支持: Browser Compatibility jsPDF will work ...
node js批量导出PDF 导出压缩为zip 拆分设计文件压缩批量导出设计
node导出pdf网上有不少介绍的文章,之前我也有过这方面的需求,总结一下遇到的问题,给大家点参考建议. 导出PDF大概会遇到以下几个阶段: 1.导出单个PDF文件 2.导出多个PDF文件下面着重说 ...
原生JS实现文件自定义位置盖章功能并导出PDF
原生JS实现文件自定义位置盖章功能并导出PDF 实现原理在需要签章的文件上面创建一个div,可以通过移动这个div来确定签章位置,然后在通过获取这个位置把章子替换到这,并导出PDF,可以多次盖章! ...
JS - 导出一个或多个pdf 生成zip压缩包
前端生成和导出pdf zip: 使用的插件:jspdf.html2canva.jszip.file-saver 插件安装 :npm install jspdf html2canvas jszip f ...
怎样将英文html文件转换成中文乱码,解决html导出pdf中文乱码问题的正确姿势
简介 jspdf是歪果仁开发的,因此在一开始就没想过支持非英文以外的文字,这就导致了非英文的文本都是乱码. 因此就有其他大佬给增加了其他解决方案,到了1.5版本也正式加入了非英文支持的解决方案. 解决 ...
vscode MPE puppeteer导出pdf的数学公式显示问题
Vs Code MPE Puppeteer 导出pdf问题这几天在用vs code写markdown的时候,写完后按照习惯,使用Markdown Preview Enhanced预览,随后在预览界面 ...

[转]JS导出PDF

[转]JS导出PDF相关推荐

最新文章

热门文章