纯前端–原生js将html页面变成pdf文件（html2canvas+jsPDF）

一、html2canvas – 将dom变成图片：

下载或者安装html2canvas：官网

1、将文档放在本地，用原生js进行引用和使用。

① 新建一个名为 html2canvas.min.js 的文件，并且将线上的内容进行复制。
② 引入 js 文件：

// js直接引入 -- 未尝试<script type="text/javascript" src="XXX/html2canvas.js"></script>// layui使用// 首先在html2canvas.js文件中添加exportslayui.define([],function(exports){// 复制的内容...exports('html2canvas',html2canvas);})// 其次进行自定义插件的引入layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方扩展extend: {// 引入html转图片的插件html2canvas: "lay/extends/html2canvas.min",}}})

2、使用 npm 进行安装使用：

待续。。。

二、jsPDF – 将图片变成pdf：

下载或者安装jsPDF ：

• github
• 中文网站
• CDN
  • Jspdf.es.js：ES 2015 模块格式。
  • Jspdf.umd.js：UMD模块格式，用于 AMD 或脚本标签加载。
  • Jspdf.polyfills.js：Internet Explorer等旧浏览器所需的兼容文件。

1、将文档放在本地，用原生js进行引用和使用。

① 新建一个名为 jsPDF.min.js 的文件，并且将线上（我找到的都不能用）或者资源 的内容进行复制。
② 引入 js 文件：

// js直接引入 -- 未尝试<script type="text/javascript" src="XXX/jsPDF.js"></script>// CDN引入 -- 未尝试<script type="text/javascript" src="https://cdn.staticfile.org/jspdf/2.5.1/jspdf.umd.min.js"></script>// layui使用// 首先在jsPDF.min.js文件中添加exportslayui.define([],function(exports){exports('jsPDF',jsPDF);})// 其次进行自定义插件的引入layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方扩展extend: {// 引入图片转pdf的插件jsPDF: "lay/extends/jsPDF.min",}}})

2、使用 npm 进行安装使用：

待续。。。

三、普通使用（html2canvas+jsPDF）：

1、 layui 或者原生js使用：

// html:<div id="box"><button id="btn">下载为pdf</button>内容....</div>// js:// layui引入：layui.define(['html2canvas', 'jsPDF'], function (exports) {var html2canvas = layui.html2canvas; // 引入html转图片var jsPDF = layui.jsPDF; // 引入图片转pdf// 初始化var init = function() {// 点击下载按钮document.getElementById("btn").onclick=function(){html2canvas(document.getElementById("box"),{allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明useCORS: true, // 是否尝试使用CORS从服务器加载图像dpi: 192, // 导出pdf清晰度scale: window.devicePixelRatio * 3, // 用于渲染的比例。默认为浏览器设备像素比率。}).then(canvas => {// html生成图片的数据var imageData = canvas.toDataURL('image/jpeg', 1.0);// 原本的html页面的宽高const canvasWidth = canvas.width;const canvasHeight = canvas.height;// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595var a4Width = 595; // A4 宽度var a4Height = (595 / canvasWidth) * canvasHeight; // A4总高度// 生成pdf的一页显示html的高度let pageHeight = canvasWidth / 595 * 842;// 未生成pdf的html页面高度，最初是整体的高度let restHeight = canvasHeight;// 页面上下偏移的大小var position = 0;/** * 参数1：方向：l：横向p：纵向 * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px" * 参数3：格式：默认为a4*/var pdf = new jsPDF('p', 'pt', 'a4');// 当内容未超过pdf一页显示的范围，无需分页if (restHeight < pageHeight) {/** * 将图像添加到PDF中 * 参数1：图片的url * 参数2：图片的格式 * 参数3：图片上下偏移的大小 * 参数4：原始宽度 * 参数5：原始高度*/ pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height );} else {while(restHeight > 0) {pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)restHeight -= pageHeight;position -= 842;if(restHeight > 0) {// 在PDF文档中添加新页面pdf.addPage();}}}// 保存为pdf格式的文件pdf.save('生成的pdf文件.pdf')})}}var Class = {init: function (options) {init();return this;}}exports('XXX', Class);)}

2、 vue/react 框架进行使用：

待续。。。

四、模块分割（html2canvas+jsPDF – 文字会截断，除了让后端做，没找到别的解决办法，感觉后端的插件比前端的更好用…）：

参考链接：https://blog.csdn.net/qq_32244819/article/details/109678481

具体代码：

// 点击下载按钮document.getElementById("btn").onclick=function(){outPutPdfFn()}// 导出方法var outPutPdfFn = function() {const A4_WIDTH = 592.28; // A4纸的宽const A4_HEIGHT = 841.89; // A4纸的高console.log('正在导出pdf，请稍候...');let target = document.getElementById('box'); // 需要打印的页面的domlet pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT; // 根据比例换算一页的高度// 获取分割的dom，即class类名为splitItem的domlet splitItemAll = document.getElementsByClassName('splitItem');// 进行分割操作，当分块的内容超出a4纸的高度，则在这个块之前插入一个空白的块，将原有的块下移进行分割for (let i = 0; i < splitItemAll.length; i++) {// 计算当前模块需要分成几部分let modulesNum = Math.ceil((splitItemAll[i].offsetTop + splitItemAll[i].offsetHeight) / pageHeight);if (isSplit(splitItemAll, i, modulesNum * pageHeight)) {let divParent = splitItemAll[i].parentNode; // 获取当前需要分割块的父节点let newNode = document.createElement('div');newNode.className = 'emptyDiv';newNode.style.background = '#ffffff';// 计算需要插入块的高度let _H = modulesNum * pageHeight - (splitItemAll[i].offsetTop + splitItemAll[i].offsetHeight);newNode.style.height = _H + 'px';newNode.style.width = '100%';let nextDom = splitItemAll[i].nextSibling; // 获取当前需要分割块的下一个兄弟节点// 判断兄弟节点是否存在console.log(nextDom);if (nextDom) {// 存在则将新节点插入到下一个兄弟节点的前面divParent.insertBefore(newNode, nextDom);} else {// 不存在则直接添加divParent.appendChild(newNode);}}}getPdf('导出pdf', 'box')}/** * 计算当前内容是否跨越了a4大小，以此分割 * @params nodes 拿到的所有需要分割的dom * @params index 当前需要分割内容的索引 * @params pageHeight A4纸的高度*/var isSplit = function(nodes, index, pageHeight) {// 当前需要分割的内容：内容高度+内容距离页面定位父元素（/body）的高度 < 页面的高度// 当前需要分割的内容的下一个兄弟节点：内容高度+内容距离页面定位父元素（/body）的高度 > 页面的高度if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {return true;}return false;}// 导出pdfvar getPdf = function(title, dom) {html2canvas(document.getElementById(dom),{allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明useCORS: true, // 是否尝试使用CORS从服务器加载图像dpi: 192, // 导出pdf清晰度scale: window.devicePixelRatio * 3 // 用于渲染的比例。默认为浏览器设备像素比率。增加清晰度}).then(canvas => {// html生成图片的数据var imageData = canvas.toDataURL('image/jpeg', 1.0);// 原本的html页面的宽高const canvasWidth = canvas.width;const canvasHeight = canvas.height;// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595var a4Width = 592.28; // A4 宽度var a4Height = (592.28 / canvasWidth) * canvasHeight; // A4总高度// 生成pdf的一页显示html的高度let pageHeight = canvasWidth / 592.28 * 841.89;// 未生成pdf的html页面高度，最初是整体的高度let restHeight = canvasHeight;// 页面上下偏移的大小var position = 0;/** * 参数1：方向：l：横向p：纵向 * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px" * 参数3：格式：默认为a4*/var pdf = new jsPDF('p', 'pt', 'a4');// 当内容未超过pdf一页显示的范围，无需分页if (restHeight < pageHeight) {/** * 将图像添加到PDF中 * 参数1：图片的url * 参数2：图片的格式 * 参数3：图片上下偏移的大小 * 参数4：原始宽度 * 参数5：原始高度*/ pdf.addImage(imageData, 'JPEG', 0, 0, position, a4Height );} else {while(restHeight > 0) {pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)restHeight -= pageHeight;position -= 841.89;if(restHeight > 0) {// 在PDF文档中添加新页面pdf.addPage();}}}// 保存为pdf格式的文件pdf.save(`${title}.pdf`)})}

五、echarts图表模糊的解决办法：

// 方法一：初始化echarts的时候，添加清晰度配置 devicePixelRatioecharts.init(chartDom, null, { devicePixelRatio: window.devicePixelRatio * 3 });// 方法二：使用svg渲染，这个效果更好，就是需要调整grid，不然图表不完整// echarts.init(chartDom, null, { renderer: "svg" })