jsPDF+html2canvas实现html导出PDF和打印
html版本
-
引入html2canvas.min.js和html2canvas.min.js
<script src="path/html2canvas.min.js"></script> <script src="path/jspdf.debug.js"></script>
-
导出核心代码
/** * 导出/下载方法 * * @param fileName 文件名称 * @param target 导出的dom元素 * @param isDownloadOrPrint true下载/false打印 */ function download_html_pdf(fileName,target,isDownloadOrPrint){ let paddingLR = 20;//左右边距 let paddingTop = 20;//第一页上边距 const index = layer.msg('开始生成PDF中...请稍后!', { icon: 16 , shade: 0.01 , time: false }); fileName +=".pdf" // 解决背景黑色问题,根据业务需要处理要导出的dom元素样式 $(target).css({'background':'#FFFFFF'}) // 转PDF html2canvas(target, { onrendered: 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-paddingLR; var imgHeight = (592.28-paddingLR)/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); // l表示横版,p:纵向 (默认纵向) var pdf = new jsPDF('', 'pt', 'a4'); // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) // 当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData,'JPEG',paddingLR,paddingTop,imgWidth,imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', paddingLR, position+paddingTop, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } // 1.本地下载 // 由于业务需要 保存成功需要跳转页面 new Promise(function (resolve, reject){ if (isDownloadOrPrint == 'true'){ pdf.save(fileName) resolve() }else { const link = window.URL.createObjectURL(pdf.output('blob')); let myWindow = window.open(link); myWindow.print(); resolve() } }).then(function (){ window.history.go(-1) }) } }) layer.close(index) }
VUe版本
-
安装依赖
npm install html2canvas npm install jspdf
-
创建文件exportPdf.js,内容如下
// 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue, options) { Vue.prototype.getPdf = function (name, id) { let title = name || 'index' html2Canvas(document.querySelector(`#${id}`), { allowTaint: true, taintTest: false, useCORS: true, dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍 scale:4 //按比例增加分辨率 }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') 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(title + '.pdf') } ) } } }
-
main.js全局引入,也可以按需局部引入
import htmlToPdf from '@/utils/exportPdf' // 创建的exportPdf.js路径 按需修改 Vue.use(htmlToPdf)
-
使用
// arg1 导出的文件名称 arg2 dom节点id this.getPdf('filename', "pdfDom");
参考:地址