html2canvas+JsPDF
安装准备:
npm install html2canvas
npm install jspdf
在需要时用的页面引入:
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
具体使用方法:
exportPdf() {
let shareContent = document.querySelector("#exportPdf"), //需要截图的包裹的(原生的)DOM 对象
width = shareContent.offsetWidth, //获取dom 宽度
height = shareContent.offsetHeight, //获取dom 高度
canvas = document.createElement("canvas"), //创建一个canvas节点
scale = 2; //定义任意放大倍数 支持小数(主要用于导出pdf模糊时使用)
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = shareContent.offsetWidth * scale + "px";
canvas.style.height = shareContent.offsetHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关,便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,//dom 原始高度
useCORS: true // 【重要】开启跨域配置,
};
//当x轴出现滚动条的时候;
if (window.pageXOffset > 0) {
opts.x = window.pageXOffset; //x轴的偏移量
opts.windowWidth= shareContent.scrollWidth;//dom元素的实际宽度
}
//当y轴出现滚动条的时候;
if (window.pageYOffset > 0) {
opts.y = $("#exportPdf").offset().top;//dom元素距离顶部的高度
opts.windowHeight= shareContent.scrollHeight;//dom元素的实际高度
}
html2canvas(shareContent, opts).then(canvas => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (contentWidth / 552.28) * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 20;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 555.28;
var imgHeight = (552.28 / contentWidth) * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var PDF = new JsPDF("", "pt", "a4");//设置pdf格式,默认为竖列展示
if (leftHeight < pageHeight) {
PDF.addImage(pageData, "JPEG", 20, 30, imgWidth, imgHeight);
} else {
//多页pdf设置
while (leftHeight > 0) {
PDF.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
PDF.addPage();
}
}
}
PDF.save("导出的文件的名字.pdf"); // 这里是导出的文件名
});
},