h5项目利用html2canvas生成PDF文件下载

项目场景：

vue项目运行在移动端（企业微信聊天栏工具、企业微信浏览器、微信浏览器、外部浏览器），PC端（微信浏览器、其他厂商浏览器），利用html2canvas将页面生成图片文件，并采用jspdf将生成的图片转为pdf，并可以保存到本地。

遇到的问题

1.页面有网络路径图片导致页面网络图片的位置是空白
解决方案：先克隆需要生成pdf的动，将网络图片地址转成base64。

2.jspdf插件生成pdf,并本地直接下载，移动端微信浏览器无反应

原因分析：本地直接下载方式，可能是微信浏览器可能对于本地生成的blob文件流下载，是限制的

解决方案：采用本地生成文件流转file利用后端上传文件服务器，后端返回文件静态路径，在利用a download 下载文件，测试后pc和移动端及微信浏览器都是好使的

实现代码

1.安装插件

npm install [email protected] jspdf --save

"dependencies": {
    "html2canvas": "~1.0.0-rc.4",  // 锁定版本， 高版本配置项的x和y有差异问题，导致生成图片位置有便宜
    "jspdf": "^2.5.1",
}

2.插件引用

import html2canvas from 'html2canvas';
import jspdf from 'jspdf';

async generatePdf(){
    let product_proposal = this.$refs.product_proposal;
    let contentWidth = product_proposal.scrollWidth;
    let contentHeight = product_proposal.scrollHeight; //btn按钮组 上面box 外边距重合
    // 克隆dom 替换网络路径图片为base64
    let new_product_proposal = await this.handleDom(product_proposal);
    //将克隆dom 放置当前dom的下一层，放置操作克隆的dom时，页面有闪动
    new_product_proposal.style.position = 'absolute'
    new_product_proposal.style.top = '0'
    new_product_proposal.style.zIndex = '-1'
    //解决ios safari 页面高度大于4096 canvas最大支持4096
    let x = 0, y=0;
    if(contentHeight > 4095 && ((/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) || /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(navigator.userAgent))){
        let scale = 4095 / contentHeight;
        let newHeight = 4095;
        let newWidth = scale * contentWidth
        new_product_proposal.style.transform = `scale(${scale})`
        x = (contentWidth - newWidth) / 2;
        y = (contentHeight - newHeight) / 2;
        contentWidth = newWidth;
        contentHeight = newHeight;
    }
    document.querySelector('.proposal-wrap').appendChild(new_product_proposal);
    new html2canvas(new_product_proposal,{
        // scale: window.devicePixelRatio*2,
        allowTaint: true,
        useCORS: true , 
        width: contentWidth,
        height: contentHeight,
        x: x,
        y: y,
        scrollY: 0,
        scrollX: 0,
        removeContainer: true
    }).then((canvas)=>{
        //重置页面
        document.querySelector('.proposal-wrap').removeChild(new_product_proposal);
        let pageData  = canvas.toDataURL("image/jpeg", 1.0);
        //  l表示横版，p：纵向 （默认纵向）
        var pdf = new jspdf('', 'mm', [contentWidth,contentHeight]);
        pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);
        let blob = pdf.output('blob');
        // 上传当前模板id 分享pdf文件
        const formData = new FormData()
        let file = new File([blob],`${(new Date).getTime()}.pdf`)
        formData.append('file', file)
        formData.append('planId', planId)
        //调用后端上传文件接口，返回文件静态地址
        PDFUpload(formData).then(res=>{
          if(res.data.data){
            // 1.本地下载
            let link = document.createElement("a");    
            link.href = res.data.data;
            link.style.display = "none"; //a标签隐藏
            link.download = `${this.planName}.pdf`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link)
          }
          Toast.clear();
        }).catch(err=>{
          console.log(err);
          this.$toast('网络不佳，pdf生成失败，请稍后再试')
        })
    }).catch(err=>{
        console.log(err);
        this.$toast('pdf生成失败')
    })
}

// 克隆dom 替换网络路径图片为base64
async handleDom(dom){
    let newDom = dom.cloneNode(true);
    //页面中的网络图片 配置class名为networkImg
    let networkImgs = newDom.querySelectorAll('.networkImg');
    for (let index = 0; index < networkImgs.length; index++) {
    //替换dom中网络路径图片为base64
        var srcBase64 =  await this.imgToBase64(networkImgs[index].src)
        networkImgs[index].src = srcBase64
    }
    return newDom;
},
//网络图片 转base64 （存在跨域的问题，需nginx配置代理）
async imgToBase64(val) {
    if (!val) return;
    var image = new Image();
    //截取网络路径 接口部分，匹配代理，解决跨域问题
    val = val.substr(val.indexOf("/img"), val.length);
    val = val.replace("/img", "/image");
    image.src = val + "?v=" + Math.random(); // 处理缓存
    image.setAttribute("crossOrigin", "*");
    var src = "";
    var srcPromise = new Promise((resolve, reject) => {
        image.onload = (e) => {
            var canvas = document.createElement("canvas");
            canvas.width = e.target.naturalWidth;
            canvas.height = e.target.naturalHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
            resolve(dataURL);
        };
    });
    await srcPromise.then((res) => {
        src = res;
    });
    return src;
},