vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)
最近有需求做表单导出，就又花时间研究了一下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="getPdf('pdfDom')"
>导出pdf1(一开始的方法)</el-button
> -->
<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请求 回来文件流再转也报跨域,后端也说了图片已经允许跨域请求, 这是为啥啊???
后来我解决了哈哈哈哈,具体看这篇博客吧
图片跨域解决