vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)_前端辣么菜

大大的周 02-07 2997

最近有需求做表单导出，就又花时间研究了一下html转图片导出，前面也做过证书打印，但是前面只是一页pdf没什么问题，今天想试试多页pdf导出会有什么问题，果然，问题很多，我搞了一早上，唉，如下（先说问题，后面再说导出方法哈）

html转Pdf 问题点1.文字显示有问题，总是有一个字显示不全2.图片显示问题**3.设置页边距****4.水印****5.清晰度****6. 滚动影响**实现方法：**1.全部内容导出一张pdf****2.a4分页导出**10/9号更新

问题点 1.文字显示有问题，总是有一个字显示不全

这里我发现给我们要导出的html最外层加padding就可以解决这个问题。

2.图片显示问题

图片如果刚好在一页pdf末尾，会被截断到下一页显示这个问题解决方法有两种，一种是只在一张pdf显示所有内容，但这样就不是按格式导出了，比如想导出a4格式就不行了，不能分页另一种比较好，我也是网上找的方法，我自己没看懂…看不下去，能实现就好…好吧，是我菜… 两种实现后面贴代码~

3.设置页边距

我们想导出的pdf留出边距，有两种方法 1.设置样式（只适合一页pdf。。）直接设置最外层padding,不过这样不太行哈哈哈，，分页了底部padding只对最后一页生效哈哈哈，大家用第二种。 2.通过插件自带的设置

var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40 20+20=40（哈哈两边哦) var a4Height = 801.89 // 原A4高 841 因为要设置边距 20 ,这里要减掉 40 // 就是在这里设置两边边距 20 20 pdf.addImage(pageData, 'JPEG', 20,20, a4Width, a4Width / canvas.width * leftHeight); 4.水印

后面介绍的实现方法中第二个有可以设置水印的，太强了，我也是复制人家的代码啊

5.清晰度

直接看方法，里面有注释

// 就是设置这两个 dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍 scale: 4, //按比例增加分辨率 6. 滚动影响

如果要导出的界面发生了滚动，会导致导出不全，是因为导出包括滚动出去的部分，网上有人说设置宽高可以解决，但是我试了不行，不知道是不是使用姿势不对？？大家可以试试，可以评论告诉我，求你了~ 最后我使用滚动条置顶实现了，就是每次导出先置顶再调用导出方法

getPdfFromHtml(ele, pdfFileName) { window.pageYoffset = 0; // 滚动置顶 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; html2Canvas(ele,{ //height: ele.scrollHeight, // 网上说设置宽高 //width: ele.scrollWidth, windowWidth: document.body.scrollWidth, // 网上说设置宽高 windowHeight: document.body.scrollHeight, }).then(canvas=>{ } 实现方法：

首先记得先转包

npm install html2canvas npm install jspdf import html2Canvas from "html2canvas"; import JsPDF from "jspdf"; 1.全部内容导出一张pdf

就是全部一张pdf导出，方法直接复制使用就行

// 只导出一张pdf,不适合要求是a4,a5..等，滚动有影响，需要设置滚动置顶 // 能解决图片导出问题 printOut(DomName) { DomName = document.getElementById(DomName) console.log("正在帮您导出......"); window.pageYoffset = 0; // 滚动置顶 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; //title，随意设置，也可以提出来做参数，传入进来，自己发挥 var title = "测试啊"; // 导出名字 var that = this; var shareContent = DomName; //需要截图的包裹的（原生的）DOM 对象 //打印看有没有获取到dom console.log(shareContent); var width = shareContent.offsetWidth; //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 2; //定义任意放大倍数支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍 canvas.height = height * scale; //定义canvas高度 *缩放 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale html2Canvas(DomName, { //允许跨域图片的加载 useCORS: true, dpi: window.devicePixelRatio , //将分辨率提高到特定的DPI 提高四倍 // scale: 2, //按比例增加分辨率 }).then(function(canvas) { var context = canvas.getContext("2d"); // 【重要】关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var imgData = canvas.toDataURL("image/", 1.0); //转化成base64格式,可上网了解此格式 var img = new Image(); img.src = imgData; img.onload = function() { img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2 img.height = img.height / 2; img.style.transform = "scale(0.5)"; if (this.width > this.height) { //此可以根据打印的大小进行自动调节 var doc = new JsPDF("l", "mm", [ this.width * 0.555, this.height * 0.555 ]); } else { var doc = new JsPDF("p", "mm", [ this.width * 0.555, this.height * 0.555 ]); } doc.addImage( imgData, "jpeg", 10, 0, this.width * 0.505, this.height * 0.545 ); doc.save(title + "-文件.pdf"); console.log("倒数3秒导出啦"); }; }); }

效果，设置了清晰度，文件好大

2.a4分页导出

能解决图片被截断问题，可设置页边距，清晰度（越清晰文件越大），文字显示不全问题，总体比较好！赞赞赞

// 可设置页边距，滚动有影响，需要设置滚动置顶 // 能解决图片导出问题 getPdfFromHtml(ele, pdfFileName) { ele = document.getElementById('pdfDom') pdfFileName = pdfFileName||'pdf' window.pageYoffset = 0; // 滚动置顶 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; // ele.style.fontFamily='宋体'; // ele.style.padding='30px'; let scale = window.devicePixelRatio * 2 html2Canvas(ele,{ // dpi: 300, dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍 scale: 4, //按比例增加分辨率 logging: false, // scale:scale, useCORS: true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。 allowTaint: false, height: ele.offsetHeight, width: ele.offsetWidth, windowWidth: document.body.scrollWidth, windowHeight: document.body.scrollHeight, backgroundColor: '#fff' }).then(canvas=>{ const _this = this; //未生成pdf的html页面高度 var leftHeight = canvas.height; var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40 var a4Height = 801.89 // 原A4高 841 因为要设置边距 20 ,这里要减掉 40 //一页pdf显示html页面生成的canvas高度; var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height); //pdf页面偏移 var position = 0; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new JsPDF('x', 'pt', 'a4'); var index = 1, canvas1 = document.createElement('canvas'), height; pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen'); function createImpl(canvas) { if (leftHeight > 0) { index++; var checkCount = 0; if (leftHeight > a4HeightRef) { var i = position + a4HeightRef; for (i = position + a4HeightRef; i >= position; i--) { var isWrite = true for (var j = 0; j < canvas.width; j++) { var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) { isWrite = false break } } if (isWrite) { checkCount++ if (checkCount >= 10) { break } } else { checkCount = 0 } } height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef); if(height<=0){ height = a4HeightRef; } } else { height = leftHeight; } canvas1.width = canvas.width; canvas1.height = height; // console.log(index, 'height:', height, 'pos', position); var ctx = canvas1.getContext('2d'); ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height); // 边距这里设置0，不然又黑边 var pageHeight = Math.round(a4Width / canvas.width * height); // pdf.setPageSize(null, pageHeight) if(position != 0){ pdf.addPage(); } // 设置 20px 边距 pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, a4Width, a4Width / canvas1.width * height); leftHeight -= height; position += height; // $('.pdfProgress').text(index + 1); // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef)); if (leftHeight > 0) { //添加全屏水印 const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAYAAADIWo5HAAACLUlEQVR42u2Zy2sCMRDGV9tbtVJKrQ/0JBWLvbgsaOttQQqreO5R6GHP/v+HZiEDQ9i8k33YDHyXbcxufpN8maRRFCJEiBAhQoTgRIfoh+hKNBe0G9I2GVG3om9bEl2I9rcIoE/77Cq8Myd6sn2ZSBgAr80YARhI+gOwCdGW6EB/d6R9XDUGFrsAf2Fe7Fswk1JBmzMd1DNKgI2EywQyUKYjkxFeOwwxkwgAvBJNqEa0DzaTHcn3qWrXdA/ocQD8m11ABUDfQF0fpujjI2QAeoZetdYdfOzB9HgGNEF6owM8Ec3Q8wEDgP07T6ktgNyB8YgAqGZ0b+gRsS2AtQP/iAUAHlAdsEW7TY6eFVrVNQN8A2AjlZho5R5wYjJhoqMiADy4DFWLPJMcKBhv3AYThFi4yJyrAAAfDrY/1SVQVhLDOWDowIwzSQ1TqwfA1P5CU3yJlsPY8fmjcTMgptmeIwB3aFbsLCvM2BRAFR4AZXYxuEdmn38hmjoosY0B5IonxLNhIYTNby0odMoAJJL1/k10bwpgQztZKaxb2YXFRnAUhexDHzoAUsGxu3j+awNA5+RmcxW1UCx1eQB4SyI1AaBrbiMEYGrwexgYBlgrgGtU/ZUY3AlGhgByTvV5MQGgW1SomqBOUWLiATy1wgNsABQz51PzWHxTALzWAW0F0EM+MKPmnLj6x0lbAPDuC5zfNPsCcChZ25DZd4VBJCW7wrRp1+whQoQIESJEg+IPRa38G55TPkQAAAAASUVORK5CYII=' for(let i=0;i<6;i++){ for(let j=0;j<5;j++){ const left = (j*120)+20; // pdf.addImage(base64,'JPEG', left, i*150, 20, 30); // 关掉水印 } } setTimeout(createImpl, 500, canvas); } else { pdf.save(pdfFileName + '.pdf'); } } } //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < a4HeightRef) { pdf.addImage(pageData, 'JPEG', 20,20, a4Width, a4Width / canvas.width * leftHeight); pdf.save(pdfFileName + '.pdf') } else { try { pdf.deletePage(0); setTimeout(createImpl, 500, canvas); } catch (err) { console.log(err); } } }) }

效果：可以看到，符合预期效果

下面是我测试的完整代码。有点乱，应该能看懂吧… 现在缺点就是按我这样设置清晰度，清晰是清晰，但是文件变得好大，下载有点慢…

一个xx.vue单文件，可以复制自己代码测试哦~

<template> <div>  <el-button type="primary" @click="exportPdf('pdfDom')" >导出pdf2(添加页边距的)</el-button > <el-button type="primary" @click="printOut('pdfDom')">导出pdf3(一张pdf)</el-button> <el-button type="primary" @click="getPdfFromHtml('pdfDom')">导出pdf4（可行）</el-button> <ul id="pdfDom"> <li> <p> 将html转pdf的纯前端解决方案通常是jspdf+html2canvas，在保持网页的宽高比以及pdf每页的大小(通常为A4)的情况下，难免会出现网页内容较多需要生成多页pdf的情况，如果按常规的方法生成的pdf很容易出现一个dom元素被截断分散在两页pdf里。 </p> </li> <li> 从页面布局的角度考虑，如果生成的网页按照与pdf固定的比例刚好是不会被截断的效果就直接解决问题了。因此最直接的方法为明确知道要生成几页pdf，网页按每页pdf的宽高映射一个固定的宽高，然后按照这个固定的宽高放置不超过该大小的dom。另一种方式则是以不被截断的最小固定高度布局，即每一块dom的高度固定，并且一页的高度刚好为该高度的整数倍，则不管怎样，最后生成的多页pdf都不会有截断的情况。由于生成的页面按照固定的pdf每页大小进行分割自然不会截断，生成pdf的代码只需要进行正常的多页pdf生成即可。 </li> <li> 如果网页无法进行固定大小的布局，在生成pdf的时候则需要计算每页pdf放置的dom达到刚好不被截断的边界情况。考虑到dom可能嵌套层级较多，并且对一些属性节点、文本节点不好计算高度，可以给dom元素添加标识来表示是否需要计算高度。此外，html2canvas将html生成canvas对象的过程比较慢，但生成多页pdf又需要将页面做拆分，因此可以只生成一个canvas对象，通过在添加canvas到pdf时设置图片定位达到截断的效果，如果页面需要有内边距，还需要在内边距的地方用空白遮挡多余的canvas内容。。 </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> <img src="../../assets/logo.png" alt="" /> </li> <li> 如果网页无法进行固定大小的布局，在生成pdf的时候则需要计算每页pdf放置的dom达到刚好不被截断的边界情况。考虑到dom可能嵌套层级较多，并且对一些属性节点、文本节点不好计算高度，可以给dom元素添加标识来表示是否需要计算高度。此外，html2canvas将html生成canvas对象的过程比较慢，但生成多页pdf又需要将页面做拆分，因此可以只生成一个canvas对象，通过在添加canvas到pdf时设置图片定位达到截断的效果，如果页面需要有内边距，还需要在内边距的地方用空白遮挡多余的canvas内容。。 </li> <li> 如果网页无法进行固定大小的布局，在生成pdf的时候则需要计算每页pdf放置的dom达到刚好不被截断的边界情况。考虑到dom可能嵌套层级较多，并且对一些属性节点、文本节点不好计算高度，可以给dom元素添加标识来表示是否需要计算高度。此外，html2canvas将html生成canvas对象的过程比较慢，但生成多页pdf又需要将页面做拆分，因此可以只生成一个canvas对象，通过在添加canvas到pdf时设置图片定位达到截断的效果，如果页面需要有内边距，还需要在内边距的地方用空白遮挡多余的canvas内容。。 </li> <li> 如果网页无法进行固定大小的布局，在生成pdf的时候则需要计算每页pdf放置的dom达到刚好不被截断的边界情况。考虑到dom可能嵌套层级较多，并且对一些属性节点、文本节点不好计算高度，可以给dom元素添加标识来表示是否需要计算高度。此外，html2canvas将html生成canvas对象的过程比较慢，但生成多页pdf又需要将页面做拆分，因此可以只生成一个canvas对象，通过在添加canvas到pdf时设置图片定位达到截断的效果，如果页面需要有内边距，还需要在内边距的地方用空白遮挡多余的canvas内容。。 </li> </ul> </div> </template> <script> import html2Canvas from "html2canvas"; import JsPDF from "jspdf"; export default { data() { return { htmlTitle: "费用签领单", isShow: false, isCanvas: false, }; }, methods: { // 存在问题需要设置元素padding，不能文字显示会有点问题 // 滚动条导出前要置顶 exportPdf() { var element = document.getElementById("pdfDom"); console.log(document.getElementsByTagName("body")[0].scrollHeight); window.pageYoffset = 0; // 滚动置顶 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; html2Canvas(element, { logging: false, // windowWidth:document.body.scrollWidth, // windowHeight:document.body.scrollHeight, // height: document.body.scrollHeight,// // width: document.body.scrollWidth,//为了使横向滚动条的内容全部展示，这里必须指定 dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍 scale: 4, //按比例增加分辨率 useCORS: true // 【重要】开启跨域配置 }).then(function(canvas) { var pdf = new JsPDF("p", "mm", "a4"); //A4纸，纵向 var ctx = canvas.getContext("2d"), a4w = 190, a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277 imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度 renderedHeight = 0; while (renderedHeight < canvas.height) { var page = document.createElement("canvas"); page.width = canvas.width; page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页 //用getImageData剪裁指定区域，并画到前面创建的canvas对象中 page .getContext("2d") .putImageData( ctx.getImageData( 0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight) ), 0, 0 ); pdf.addImage( page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width) ); //添加图像到页面，保留10mm边距 renderedHeight += imgHeight; if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容，添加一个空页 // delete page; } pdf.save("content.pdf"); }); }, // 只导出一张pdf,不适合要求是a4,a5..等，滚动有影响，需要设置滚动置顶 // 能解决图片导出问题 printOut(DomName) { DomName = document.getElementById(DomName) console.log("正在帮您导出......"); window.pageYoffset = 0; // 滚动置顶 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; //title，随意设置，也可以提出来做参数，传入进来，自己发挥 var title = "测试啊"; var that = this; var shareContent = DomName; //需要截图的包裹的（原生的）DOM 对象 //打印看有没有获取到dom console.log(shareContent); var width = shareContent.offsetWidth; //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 2; //定义任意放大倍数支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍 canvas.height = height * scale; //定义canvas高度 *缩放 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale html2Canvas(DomName, { //允许跨域图片的加载 useCORS: true, dpi: window.devicePixelRatio , //将分辨率提高到特定的DPI 提高四倍 // scale: 2, //按比例增加分辨率 }).then(function(canvas) { var context = canvas.getContext("2d"); // 【重要】关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var imgData = canvas.toDataURL("image/", 1.0); //转化成base64格式,可上网了解此格式 var img = new Image(); img.src = imgData; img.onload = function() { img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2 img.height = img.height / 2; img.style.transform = "scale(0.5)"; if (this.width > this.height) { //此可以根据打印的大小进行自动调节 var doc = new JsPDF("l", "mm", [ this.width * 0.555, this.height * 0.555 ]); } else { var doc = new JsPDF("p", "mm", [ this.width * 0.555, this.height * 0.555 ]); } doc.addImage( imgData, "jpeg", 10, 0, this.width * 0.505, this.height * 0.545 ); doc.save(title + "-文件.pdf"); console.log("倒数3秒导出啦"); }; }); }, // 可设置页边距，滚动有影响，需要设置滚动置顶 // 能解决图片导出问题 getPdfFromHtml(ele, pdfFileName) { ele = document.getElementById('pdfDom') pdfFileName = pdfFileName||'pdf' window.pageYoffset = 0; // 滚动置顶 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; // ele.style.fontFamily='宋体'; // ele.style.padding='30px'; let scale = window.devicePixelRatio * 2 html2Canvas(ele,{ // dpi: 300, dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍 scale: 4, //按比例增加分辨率 logging: false, // scale:scale, useCORS: true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。 allowTaint: false, height: ele.offsetHeight, width: ele.offsetWidth, windowWidth: document.body.scrollWidth, windowHeight: document.body.scrollHeight, backgroundColor: '#fff' }).then(canvas=>{ const _this = this; //未生成pdf的html页面高度 var leftHeight = canvas.height; var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40 var a4Height = 801.89 // 原A4高 841 因为要设置边距 20 ,这里要减掉 40 //一页pdf显示html页面生成的canvas高度; var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height); //pdf页面偏移 var position = 0; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new JsPDF('x', 'pt', 'a4'); var index = 1, canvas1 = document.createElement('canvas'), height; pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen'); function createImpl(canvas) { if (leftHeight > 0) { index++; var checkCount = 0; if (leftHeight > a4HeightRef) { var i = position + a4HeightRef; for (i = position + a4HeightRef; i >= position; i--) { var isWrite = true for (var j = 0; j < canvas.width; j++) { var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) { isWrite = false break } } if (isWrite) { checkCount++ if (checkCount >= 10) { break } } else { checkCount = 0 } } height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef); if(height<=0){ height = a4HeightRef; } } else { height = leftHeight; } canvas1.width = canvas.width; canvas1.height = height; // console.log(index, 'height:', height, 'pos', position); var ctx = canvas1.getContext('2d'); ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height); // 边距这里设置0，不然又黑边 var pageHeight = Math.round(a4Width / canvas.width * height); // pdf.setPageSize(null, pageHeight) if(position != 0){ pdf.addPage(); } // 设置 20px 边距 pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, a4Width, a4Width / canvas1.width * height); leftHeight -= height; position += height; // $('.pdfProgress').text(index + 1); // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef)); if (leftHeight > 0) { //添加全屏水印 const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAYAAADIWo5HAAACLUlEQVR42u2Zy2sCMRDGV9tbtVJKrQ/0JBWLvbgsaOttQQqreO5R6GHP/v+HZiEDQ9i8k33YDHyXbcxufpN8maRRFCJEiBAhQoTgRIfoh+hKNBe0G9I2GVG3om9bEl2I9rcIoE/77Cq8Myd6sn2ZSBgAr80YARhI+gOwCdGW6EB/d6R9XDUGFrsAf2Fe7Fswk1JBmzMd1DNKgI2EywQyUKYjkxFeOwwxkwgAvBJNqEa0DzaTHcn3qWrXdA/ocQD8m11ABUDfQF0fpujjI2QAeoZetdYdfOzB9HgGNEF6owM8Ec3Q8wEDgP07T6ktgNyB8YgAqGZ0b+gRsS2AtQP/iAUAHlAdsEW7TY6eFVrVNQN8A2AjlZho5R5wYjJhoqMiADy4DFWLPJMcKBhv3AYThFi4yJyrAAAfDrY/1SVQVhLDOWDowIwzSQ1TqwfA1P5CU3yJlsPY8fmjcTMgptmeIwB3aFbsLCvM2BRAFR4AZXYxuEdmn38hmjoosY0B5IonxLNhIYTNby0odMoAJJL1/k10bwpgQztZKaxb2YXFRnAUhexDHzoAUsGxu3j+awNA5+RmcxW1UCx1eQB4SyI1AaBrbiMEYGrwexgYBlgrgGtU/ZUY3AlGhgByTvV5MQGgW1SomqBOUWLiATy1wgNsABQz51PzWHxTALzWAW0F0EM+MKPmnLj6x0lbAPDuC5zfNPsCcChZ25DZd4VBJCW7wrRp1+whQoQIESJEg+IPRa38G55TPkQAAAAASUVORK5CYII=' for(let i=0;i<6;i++){ for(let j=0;j<5;j++){ const left = (j*120)+20; // pdf.addImage(base64,'JPEG', left, i*150, 20, 30); // 关掉水印 } } setTimeout(createImpl, 500, canvas); } else { pdf.save(pdfFileName + '.pdf'); } } } //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < a4HeightRef) { pdf.addImage(pageData, 'JPEG', 20,20, a4Width, a4Width / canvas.width * leftHeight); pdf.save(pdfFileName + '.pdf') } else { try { pdf.deletePage(0); setTimeout(createImpl, 500, canvas); } catch (err) { console.log(err); } } }) }, }, }; </script> <style scoped lang="scss"> ul { // padding: 20px; // padding也可以留出边距，解决文字显示不全，不过方法设置更好 li { min-height: 150px; font-size: 25px; } li:nth-child(2n) { background-color: skyblue; } } </style> 10/9号更新

由于后面项目又使用到了html转pdf, 使用过程发现了新问题，特地过来更新一下。问题： 1. 使用上面我推荐的那个导出方法，发现在火狐导出有问题，卡住了，一直导不出，暂时不知道问题出现原因，有空再去分析一下,我现在换了一种方式,浏览器导出都没问题.

// 导出3 --现在用这个 export function htmlToPdf(domName, title) { const el = document.getElementById(domName); return new Promise((resolve, reject) => { const ele = document.getElementById(domName); let eleW = ele.offsetWidth; // 获得该容器的宽 // let eleH = ele.offsetHeight // 获得该容器的高 let eleH = ele.offsetHeight; // 获得该容器的高 let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 var canvas = document.createElement("canvas"); let scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1; canvas.width = eleW * 2; // 将画布宽&&高放大两倍 canvas.height = eleH * 2; var context = canvas.getContext("2d"); context.scale(2, 2); // context.translate(-offsetLeft - abs, -offsetTop); var opts = { // scale: 2, // canvas: canvas, width: eleW, height: eleH, // logging :true, useCORS: true, background: "#FFF", allowTaint: false, // dpi: 300, // dpi: window.devicePixelRatio * 2, // scale: window.devicePixelRatio * 2, }; html2Canvas(el, opts).then((canvas) => { var pdf = new JsPDF("p", "mm", "a4"); //A4纸，纵向 var ctx = canvas.getContext("2d"), a4w = 200, a4h = 287, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277 imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度 renderedHeight = 0; while (renderedHeight < canvas.height) { var page = document.createElement("canvas"); page.width = canvas.width; page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页 //用getImageData剪裁指定区域，并画到前面创建的canvas对象中 page .getContext("2d") .putImageData( ctx.getImageData( 0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight) ), 0, 0 ); pdf.addImage( page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width) ); //添加图像到页面，保留10mm边距 renderedHeight += imgHeight; if (renderedHeight < canvas.height) { pdf.addPage(); //如果后面还有内容，添加一个空页 } // delete page; } //保存文件 try { pdf.save(title + ".pdf"); resolve(); } catch (error) { reject(); } }); }); }

2. 发现通过设置dpi和scale来提高清晰度后，如果页面内容过长，大概超过五页这样，就会导致后面的内容导出空白，导出不全，这个问题我尝试了解决，但是暂时也没解决😢,网上说的都试过了…

3. 图片跨域问题, 我这边图片是阿里云的地址, 默认在页面分页用Img标签展示, 点击导出的时候再请求一次后端拿回全部数据展示(这里展示是定位到其他地方,不遮住原来页面) , 这时导出就报跨域了.

跨域解决: (1) 如果是直接导出当前页面的内容, 我们直接设置 useCORS: true 就可以解决 (2) 但是我这里场景不太一样,上面也说了, 尝试把阿里云地址的图片转成base64再给img, 但是转base64过程也报跨域, 又想到通过ajax请求回来文件流再转也报跨域,后端也说了图片已经允许跨域请求, 这是为啥啊???

后来我解决了哈哈哈哈,具体看这篇博客吧图片跨域解决