vue項目中導出PDF的兩種方式

時間 2020-05-22

標籤 vue 項目導出 pdf 兩種方式简体版

原文原文鏈接

參考你們導出的方式，基本上是以下兩種：css

1.使用 html2Canvas + jsPDF 導出PDF， 這種方式什麼都好，就是下載的pdf太模糊了。對要求好的pdf這種方式真是不行啊！

2.調用瀏覽器自身的方法。window.print() 來打印（打印時可選下載），這種方式打印出來很清楚，但純在瀏覽器兼容問題。
 谷歌瀏覽器比較好用點。

兩種導出pdf清晰度對比：

--------------左邊 html2canvas + jspdf；-----------------------------------------------右邊window.print() 瀏覽器方式------------html

方式一:html2canvas+jspdf

html2Canvas + jsPDF 導出廣泛存在一個問題就是不太清楚的問題。目前我沒有在網上找到合適這種方式打印出清晰的PDF解決方案。vue

若是不是要求過高的這種方式仍是能夠用的。git

這種方式實現的方法：github

首先npm 下載兩插件chrome

npm i html2canvas jspdf --save-dev

在.vue文件中定義要到導出 DOM 元素npm

<template>
    <div class="pdf-demo">

        <button @click="handleDown">jsPDF方式下載</button>
        <button @click="handleWindowPrint( '#demo', '電子合同' )">瀏覽器方式下載</button>

        <div id="demo" > #demo 中的內容導出成 PDF </div>


    </div>
</template>

而後建立一個 htmlToPdf.js 文件，內容以下：canvas

import html2canvas from 'html2canvas'; import JsPDF from 'jspdf'; /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName PDF文件生成後的文件名字 * */

function downloadPDF(ele, pdfName){ let eleW = ele.offsetWidth;// 得到該容器的寬
    let eleH = ele.offsetHeight;// 得到該容器的高
 let eleOffsetTop = ele.offsetTop;  // 得到該容器到文檔頂部的距離
    let eleOffsetLeft = ele.offsetLeft; // 得到該容器到文檔最左的距離

    var canvas = document.createElement("canvas"); var abs = 0; let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 得到當前可視窗口的寬度（不包含滾動條）
    let win_out = window.innerWidth; // 得到當前窗口的寬度（包含滾動條）

    if(win_out>win_in){ // abs = (win_o - win_i)/2; // 得到滾動條長度的一半
        abs = (win_out - win_in)/2;    // 得到滾動條寬度的一半 // console.log(a, '新abs');
 } canvas.width = eleW * 2;    // 將畫布寬&&高放大兩倍
    canvas.height = eleH * 2; var context = canvas.getContext("2d"); context.scale(2, 2); context.translate(-eleOffsetLeft -abs, -eleOffsetTop); // 這裏默認橫向沒有滾動條的狀況，由於offset.left(),有無滾動條的時候存在差值，所以
    // translate的時候，要把這個差值去掉

    // html2canvas(element).then( (canvas)=>{ //報錯
    // html2canvas(element[0]).then( (canvas)=>{
 html2canvas( ele, { dpi: 300, // allowTaint: true, //容許 canvas 污染， allowTaint參數要去掉，不然是沒法經過toDataURL導出canvas數據的
        useCORS:true  //容許canvas畫布內 能夠跨域請求外部連接圖片, 容許跨域請求。
    } ).then( (canvas)=>{ var contentWidth = canvas.width; var contentHeight = canvas.height; //一頁pdf顯示html頁面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html頁面高度
        var leftHeight = contentHeight; //頁面偏移
        var position = 0; //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
        var imgWidth = 595.28; var imgHeight = 595.28/contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new JsPDF('', 'pt', 'a4'); //有兩個高度須要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
        //當內容未超過pdf一頁顯示的範圍，無需分頁
        if (leftHeight < pageHeight) { //在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設置在pdf中顯示；
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {    // 分頁
            while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白頁
                if(leftHeight > 0) { pdf.addPage(); } } } //可動態生成
 pdf.save(pdfName); }) } export default { downloadPDF }

View Code

在要導出的PDF的.vue文件中，以下是使用跨域

引入：瀏覽器

import htmlToPdf from 'yourPath /htmlToPdf';

點擊 jsPDF方式下載按鈕執行以下函數，便可導出pdf

 methods: { handleDown(){ //導出PDF
                htmlToPdf.downloadPDF( document.querySelector('#demo'),'個人PDF'); }, }

方式二:window.print()方法

　　調用瀏覽的window.print() 方法，這種方式實現的主要思路爲：點擊打印（下載）按鈕，

>將要<body>標籤內的內容替換成要打印的 DOM元素，這樣就能夠避免打印不想要打印的內容了。（若是項目中使用的UI框架，此時<head>標籤內會自動移入一些樣式，最後打印時把head內的沒必要要的內容也替換掉。）

>而後經過setTimeout()方法異步調用 window.print()，由於若是你要打印的 DOM元素不是寫的行內樣式的話瀏覽器渲染DOM時，是須要時間的，若是直接同步調取 window.print() 方法會形成內部樣式表和外部樣式表的樣式丟失。

>調取完打印後使用 window.location.reload() 刷新頁面,恢復body 、head 表情內的內容。

具體實現代碼以下：

點擊瀏覽器方式下載按鈕執行以下函數，便可導出pdf（打印界面能夠選擇另存爲PDF文件）

 methods: { //瀏覽器方式打印
            //ele 爲 css ID選擇器
            //fileName 生成的PDF文件名
 handleWindowPrint(ele, fileName){ //去除頁面沒必要要的 head 標籤內 內容， 避免影響打印頁 ， title 爲保存爲 pdf 的文件時的 文件名
                document.head.innerHTML = '<meta charset="utf-8">\n' +
                    ' <title> ' + fileName + '</title>\n' +
                    ' <link rel="shortcut icon" href="http://192.168.29.50:8081/favicon.ico" type="image/x-icon" />\n' +
                    ' <meta name="format-detection" content="telephone=no">\n' +
                    ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
                    ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
                    ' <link rel="stylesheet" href="./static/css/contract.css"/>';  //生成pdf的外部css樣式
               
                //要打印的 內容 html
                document.body.innerHTML = document.querySelector( ele ).outerHTML; // window.print();

                //轉異步 等待dom元素渲染（樣式）完畢在打印
                setTimeout( ()=>{ //打印
 window.print(); //刷新頁面
 window.location.reload(); },20 ) }, },

可是上面的方法會破壞掉vue的機制，打印完完畢後必須刷新頁面才能恢復。因此經過動態建立iframe來打印（推薦的方法）：

修改後的js代碼：

let handleWindowPrint = (ele, fileName, vm)=>{ var oIframe = document.createElement('iframe'); var oScript = document.createElement('script'); document.body.appendChild(oIframe); var titleText = document.head.getElementsByTagName('title')[0].innerText; document.head.getElementsByTagName('title')[0].innerText = `${fileName}`; oIframe.contentDocument.head.innerHTML = `<meta charset="utf-8">
                                              <title>${fileName}</title>
                                              <meta name="format-detection" content="telephone=no">
                                              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                              <meta name="viewport" content="width=device-width,initial-scale=1.0">`; // oIframe.contentWindow.document.body.innerHTML = document.querySelector(ele).outerHTML;
    oIframe.contentDocument.body.innerHTML = document.querySelector(ele).outerHTML; oScript.innerHTML = 'window.print();'; oIframe.contentDocument.body.appendChild(oScript); document.body.removeChild(oIframe); document.head.getElementsByTagName('title')[0].innerText = titleText; }; export default { handleWindowPrint }