vue2前端实现html导出pdf功能

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

等有时间再自己总结