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

更新時間：2022年03月03日 11:52:35 作者：沒用的a吉

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

效果圖如下

 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);
           });
      },

我這里直接將整個的img插入到pdf,并未截斷分頁，因為截斷的話需要調(diào)整，不太友好，不然會把文字從中間位置截斷

        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);
        //這里只生成了一頁的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)
      },

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

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

缺點就是無法復制，對pdf操作不大兼容