讲html页面转成pdf(vue)

284 阅读1分钟

`//首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf createImage(){//生成图片->pdf let _this = this;

    //----此处是解决页面带滚动条的时候截图不全问题
    window.pageYoffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;'
    //----------------------------------------
    
    let canvas = document.createElement("canvas");
    let context = canvas.getContext("2d");
    let _articleHtml = document.getElementById('imageTofile');
    let _w = _articleHtml.clientWidth;
    let _h = _articleHtml.clientHeight;
    
    //-----这里解决生成的pdf不清晰的问题 先放大3倍----后面再缩小3倍
    let scale = 3;
    canvas.width = _w * scale;
    canvas.height = _h * scale;
    context.scale(scale, scale);
    
    
    let opts = {
        scale: 1,
        width: _w,
        height: _h,
        canvas: canvas,
        useCORS: true
    };  
      (window.html2canvas || html2canvas)(_articleHtml, opts).then(canvas => {//IOS13.4无效解决 和{(intermediate value)(intermediate value)} is not a function+;
        _this.createPdfAll(canvas, scale);
       });
  },
 
  
  createPdfAll (canvas, scale) {//生成图片->pdf
    //-----------宽高缩小3倍---------------------
    let contentWidth = canvas.width / scale
    let contentHeight = canvas.height / scale
    //--------------------
    let pdf = new jsPDF('', 'pt', [contentWidth, contentHeight+50]) //此处加50是pdf最后离底部的空白距离。根据需要自行调节
    let pageData = canvas.toDataURL('image/jpeg', 1.0);
    //这里只生成了一页的pdf,并未截断,需要截断的话在此处操作
    pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
    
    //这里是将pdf的流文件---》file文件
    let filename = 'question.pdf' ;
    let datauri = pdf.output('dataurlstring');
    let file = this.dataURLtoFile(datauri,filename);
    
    // 以文件的形式上传给服务器
    this.uploadImg(file)
  },

dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){undefined u8arr[n] = bstr.charCodeAt(n); } //转换成file对象 return new File([u8arr], filename, {type:mime}); //转换成成blob对象 //return new Blob([u8arr],{type:mime}); },`