最近有需求做简历和邮件导出，就查到了html转图片导出，发现只是一页pdf没什么问题，多页pdf导出会有很多问题
- 使用方法
- 安装依赖与引入
npm install html2canvas
npm install jspdf
//新建asset/libs/htmlToPdf引入下面两行
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
//根据分页与否取下面两种代码
- main.js引入
import htmlToPdf from './asset/libs/htmlToPdf';
Vue.use(htmlToPdf);
- 滚动影响
- 强制滚动条置顶，就是每次导出先置顶再调用导出方法
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=>{
}
- 文字显示有问题，总是有一个字显示不全
解决办法：
- 给要导出的html最外层加padding
- 内容、图片显示不全
解决办法：
- 不分页
// 只导出一张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);
}
}
})
}
- 设置页边距
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);
- 清晰度
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4, //按比例增加分辨率
转载：https://blog.csdn.net/weixin_45295262/article/details/117041018
