调用:
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

}