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

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

需要借助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,并未截斷分頁，因為截斷的話需要調整，不太友好，不然會把文字從中間位置截斷

        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最后離底部的空白距離。根據需要自行調節
        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)
      },

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

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

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

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