1. 功能实现方案
1.html转换成canvas后生成图片导出pdf(本文选用)
- html转canvas插件:html2canvas是一款将HTML代码转换成Canvas的插件;
- canvas生成pdf:jsPDF是一个使用Javascript语言生成PDF的开源库
2.HTML代码转出pdf
wkhtmltopdf是一款将HTML代码转换成pdf的插件,表格场景使用居多
2.技术实现(基于html2canvas和jsPDF实现)
1.安装插件
npm install html2canvas
npm install jspdf
2.封装函数
这里函数参考了网上多种,最后自己选择了这种并发并修改了部分内容,实现可以传入两个参数来指定要导出为pdf的文件
src/utils/topdf.js
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";export default {install(Vue, options) {console.log(options);// vue原型上挂载getPdf方法实现转换功能// 参数:(dom元素,导出文件的文件名)Vue.prototype.getPdf = function (dom, title) {html2Canvas(document.querySelector(dom), {allowTaint: true,}).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");});};},
};
3.全局注册
在main.js中导入并注册
//全局注册 打印pdf:
import htmlToPdf from "./utils/topdf";
Vue.use(htmlToPdf);
4.使用
解释:1.为需要打印的dom元素添加类名或者id名以方便获取dom
2.给打印按钮添加点击事件
2.1 点击事件触发全局挂载的getPdf方法
2.2 参数为 (dom元素,导出pdf的文件名)
<button @click="getPdf('.pdf', 'file2')">导出pdf</button><div class="pdf"><p v-for="(item, index) in 50" :key="index">{{ item }}123123121322313212313132123</p></div>
5. 问题
会出现衔接问题
防止截断可以参考这个博客https://www.cnblogs.com/jimyking/p/17101947.html
等有时间再自己总结