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文件的文章就介紹到這瞭,更多相關vue將html頁面生成pdf文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: