vue怎么將html頁面生成高清晰pdf文件

本文小編為大家詳細(xì)介紹“vue怎么將html頁面生成高清晰pdf文件”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue怎么將html頁面生成高清晰pdf文件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

需要借助html2canvas和jspdf這兩個插件

首先是將頁面用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);
           });
      },

我這里直接將整個的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);
        
        // 以文件的形式上傳給服務(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對象
            return new File([u8arr], filename, {type:mime});
            //轉(zhuǎn)換成成blob對象
            //return new Blob([u8arr],{type:mime});
        },

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

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

讀到這里，這篇“vue怎么將html頁面生成高清晰pdf文件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。