快捷導(dǎo)航

vue將html頁(yè)面生成高清晰pdf文件的方法

更新時(shí)間：2022年03月03日 11:52:35 作者：沒(méi)用的a吉

最近工作中遇到個(gè)需求,需要實(shí)現(xiàn)個(gè)可視化圖表頁(yè)的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁(yè)面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下

效果圖如下

 createImage(){//生成圖片->pdf
        let _this = this;
        
        //----此處是解決頁(yè)面帶滾動(dòng)條的時(shí)候截圖不全問(wèn)題
        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不清晰的問(wèn)題 先放大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無(wú)效解決 和{(intermediate value)(intermediate value)} is not a function+;
            _this.createPdfAll(canvas, scale);
           });
      },

我這里直接將整個(gè)的img插入到pdf,并未截?cái)喾猪?yè)，因?yàn)榻財(cái)嗟脑捫枰{(diào)整，不太友好，不然會(huì)把文字從中間位置截?cái)?/p>

        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最后離底部的空白距離。根據(jù)需要自行調(diào)節(jié)
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        //這里只生成了一頁(yè)的pdf，并未截?cái)?，需要截?cái)嗟脑捲诖颂幉僮?
        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);
        
        // 以文件的形式上傳給服務(wù)器
        this.uploadImg(file)
      },

流文件轉(zhuǎn)成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);
            }
            //轉(zhuǎn)換成file對(duì)象
            return new File([u8arr], filename, {type:mime});
            //轉(zhuǎn)換成成blob對(duì)象
            //return new Blob([u8arr],{type:mime});
        },

種方案純前端實(shí)現(xiàn)，無(wú)需后端配合，并且頁(yè)面還原度比較高，對(duì)于pdf操作要求不高的需求，還是比較合適的解決方案。

缺點(diǎn)就是無(wú)法復(fù)制，對(duì)pdf操作不大兼容