vue項目中導出PDF的兩種方式 window.print()局部打印三種方式

時間 2019-12-12

標籤 vue 項目導出 pdf 兩種方式 window.print window print 局部打印三種欄目 Windows 简体版

原文原文鏈接

參考你們導出的方式，基本上是以下兩種：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
}