调用：
let domHeight = document.querySelector(‘#pdfDom’).offsetHeight
htmlToPdfHeight.downloadPDF(document.querySelector('#pdfDom'), this.name,domHeight)
以下是 js 文件内容 ——-(排版可能有问题)
import html2canvas from ‘html2canvas’;
import JsPDF from ‘jspdf’;
// 自定义只下载一页 pdf
/**
- @param dom 要生成 pdf 的 DOM 元素（容器）
- @param padfName PDF 文件生成后的文件名字
- */
function downloadPDF(dom, pdfName,domHeight){
// 计算屏幕放大倍数
var ratioN=0;
var screen=window.screen;
var ua=navigator.userAgent.toLowerCase();
if(window.devicePixelRatio !== undefined){ratioN=window.devicePixelRatio;}else if(~ua.indexOf('msie')){if(screen.deviceXDPI && screen.logicalXDPI){ratioN=screen.deviceXDPI/screen.logicalXDPI;}
}else if(window.outerWidth !== undefined && window.innerWidth !== undefined){ratioN=window.outerWidth/window.innerWidth;}
if(ratioN){ratioN=Math.round(ratioN*100);
}
var windowScale = ratioN / 100;
var box = window.getComputedStyle(dom);
// DOM 节点计算后宽高
// var windowScale = box.widows;
var width = parseInt(box.width, 10) * windowScale;
var height = parseInt(box.height, 10) * windowScale;
// console.log(windowScale,"windowScale")
// console.log(width,height,"dom 节点 *widowsSale")
// 获取像素比
// const scaleBy = this.DPR();
var scaleBy = 1; // 不进行放大，避免屏幕文字 缩放 导致文件过大下载失败
// 创立自定义 canvas 元素
var canvas1=document.createElement('canvas');
// 设置宽高
canvas1.width=width * scaleBy ;// 留神：没有单位
canvas1.height= height * scaleBy;// 留神：没有单位
// 设定 canvas css 宽高为 DOM 节点宽高
canvas1.style.width = `${width}px`;
canvas1.style.height = `${height}px`;
// console.log(canvas1.width,"canvas1.width00")
// 获取画笔
var ctx=canvas1.getContext("2d");
// 将所有绘制内容放大像素比倍
ctx.scale(scaleBy, scaleBy);
html2canvas( dom, {
dpi: 300,
// allowTaint: true, // 容许 canva 净化，allowTaint 参数要去掉，否则是无奈通过 toDataURL 导出 canva 数据的
useCORS:true, // 容许 canva 画布内 能够跨域申请内部链接图片, 容许跨域申请。height:domHeight,
}).then((canvas)=>{var img = new Image();
if(img.complete) {img.src = canvas.toDataURL(); // 因为图片异步加载，肯定要等 img 加载好，再设置 src 属性
img.onload = function() {
// 绘制图片
ctx.drawImage(img,0,0);
ctx.moveTo(0,0);
ctx.lineTo(canvas1.width,canvas1.height);
ctx.font = "40px microsoft yahei";
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.textAlign = 'center';ctx.textBaseline = ‘Middle’;
ctx.rotate((-25 * Math.PI) / 180); // 水印初始偏转角度
// 绘制水印到 canvas 上
for (let i = (canvas1.height*0.5)*-1; i<canvas1.height; i+=400) {for (let j = 0; j<canvas1.height*1.5; j+=360) {ctx.fillText("这是水印文字",i,j);
}
}
ctx.rotate((25 * Math.PI) / 180); // 把水印偏转角度调整为原来的，不然他会始终转
var contentWidth = canvas.width;
var contentHeight = canvas.height;
// console.log(contentWidth,contentHeight,"canvas 宽高")
// 一页 pdf 显示 html 页面生成的 canvas 高度;
// var pageHeight = contentWidth / 592.28 * 841.89;
// domHeight = document.querySelector('#pdfDom').offsetHeight // 只下载一页 pdf
var pageHeight = contentWidth / 592.28 * (Number(domHeight));
// 未生成 pdf 的 html 页面高度
var leftHeight = contentHeight;
// 页面偏移
var position = 0;
//a4 纸的尺寸 [595.28,841.89]，html 页面生成的 canva 在 pdf 中图片的宽高
var imgWidth = 595.28;
var imgHeight = 595.28/contentWidth * (Number(domHeight)) * windowScale;
// console.log(imgWidth,imgHeight,"imgpdf 宽高")
var pageData = canvas1.toDataURL('image/jpeg', 1.0);
// var pdf = new JsPDF('','pt','a4');
var pdf = new JsPDF('','pt', [595.28,imgHeight]);
// 有两个高度须要辨别，一个是 html 页面的理论高度，和生成 pdf 的页面高度 (841.89)
// 当内容未超过 pdf 一页显示的范畴，无需分页
// if (leftHeight < pageHeight) {// 在 pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度) 设置在 pdf 中显示；pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
// }
// 可动静生成
pdf.save(pdfName);
dom.style.overflowY = 'auto'
dom.style.height = '100%'
}
}
})}
export default {
downloadPDF}