html2canvas&&jspdf--pdf本地下载的屏幕自定义缩放问题,只下载一页,水印,命名文件

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

}
export default {

downloadPDF

}

你可能感兴趣的:(html5前端vue.js)