美文网首页前端学习基地
h5项目利用html2canvas生成PDF文件下载

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

作者: alice_沉默如初 | 来源:发表于2022-05-26 15:55 被阅读0次

    项目场景:

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

    遇到的问题

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

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

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

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

    实现代码

    1.安装插件

    npm install html2canvas@1.0.0-rc.4 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;
    },
    

    相关文章

      网友评论

        本文标题:h5项目利用html2canvas生成PDF文件下载

        本文链接:https://www.haomeiwen.com/subject/ytauprtx.html