调用:
let domHeight = document.querySelector('#pdfDom').offsetHeightcss
htmlToPdfHeight.downloadPDF(document.querySelector('#pdfDom'), this.name,domHeight)
如下是js文件内容-------(排版可能有问题)
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
// 自定义只下载一页pdfhtml
/**canvas
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';dom
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
}jsp