VUE框架中實現HTML頁面（局部）內容轉PDF下載

有一朋友想把網頁內容變成PDF下載下來。問我有沒有好辦法。

這還真巧了，咱公司也有這個需求，就是網頁生成合同，然後可以直接列印合同內容。最早吧，就是可以直接列印就好了。

當時為解決完美列印的問題，挺費勁的，當時第三方插件還有BUG（當然把解決放給發給作者了，作者早已經修複了），正經反覆折騰了好一陣子。

就留了篇帖子《VUE實現HTML頁面局部內容的列印（print.js），出現多列印一個空白頁的問題》記錄一下當時踩的坑，也希望能幫到更有需要的人。

後來校區門店想要可以選擇，要麼直接列印，要麼保存PDF，以備日後存檔和列印。

這次比較順利，至少沒怎麼採坑，直接就搞定了。藉著這次機會，也簡單整理下，希望可以幫助有需要的人吧。

簡單步驟如下：

一、先下載JS文件（文末附源碼），保存到項目目錄中

二、下載兩個類庫

cnpm install --save html2canvas
cnpm install jspdf --save

三、引入下載的htmlToPdf.js文件，在_main.js文件中導入

import htmlToPdf from '../libs/js/htmlToPdf.js';
Vue.use(htmlToPdf);

四、直接使用 this.getPdf() 調用函數即可

// nodeName：節點名稱（要列印的內容）
// fileName：要生成的pdf文件名，不包含（.pdf）擴展名
// scale：PDF文字的清晰度
// style：自定義樣式，根據需要，可以傳入樣式對要列印的對象進行一定的設定
let fileName = '合同' + EUtils.dateFormat(new Date(), 'yyyymmddhhiiss');// 生成pdf文件名，格式：合同年月日時分秒
this.getPdf('#auditionOrder', fileName);// nodeName, fileName, scale, style 此方法一共四個參數，一般前兩個參數基本就滿足絕大部分需求了

看上去夠簡單了吧？對於這次問題的解決，相對的，前期確實比較順利，但是生成的PDF文件的內容樣式調整確實還需要耗費精力去精雕細琢。

當然，這就沒有技術難度了，就是一個經驗和耐心的活了，不在這裡描述了。

附htmlToPdf.js源碼

/**
 * 通用html轉PDF文件
 * 
 * 需要先下載兩個插件，才可以正常使用
 * cnpm install --save html2canvas
 * cnpm install jspdf --save
 * 
 * 在需要使用的地方，直接調用this.getPdf(nodeName, fileName, scale, style)；
 * nodeName，頁面中需要轉成PDF文件的內容部分定義id屬性，id屬性值
 * fileName，要生成的pdf文件名，不包含（pdf）擴展名
 * scale，PDF文字的清晰度
 * style，自定義樣式，根據需要，可以傳入樣式對要列印的對象進行一定的設定
 * 例如：this.getPdf('#nodeId' 'PDF文件名');
 */
/* eslint-disable */
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default {
    install(Vue, options) {
        Vue.prototype.getPdf = function(nodeName, fileName, scale, style) {
            // 導出之前先將滾動條置頂，不然會出現數據不全的現象
            window.pageYOffset = 0;
            document.documentElement.scrollTop = 0
            document.body.scrollTop = 0

            // loading提示信息
            this.$Message.config({top:500});
            var downloadPdfMsg = this.$Message.loading({
                content : 'PDF文件生成中...',
                duration : 0,
            });
            // 要轉化的數據
            var html2Pdf = nodeName ? document.querySelector(nodeName) : document.body;// 要轉換的數據（沒有傳入指定節點，則預設轉換整個頁面）
            
            if (style) { // 如果傳入自定義樣式
                html2Pdf.style.cssText = style;
            }
 
            // 參數配置
            var opts = {
                allowTaint: true,//允許載入跨域的圖片
                taintTest: true, //檢測每張圖片都已經載入完成
                scale: scale || 3, // 添加的scale 參數
                logging: false, //日誌開關，發佈的時候記得改成false
                useCORS: false
            };
            html2Canvas(html2Pdf, opts).then((canvas) => {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                var pageHeight = contentWidth / 592.28 * 841.89;//一頁pdf顯示html頁面生成的canvas高度
                var leftHeight = contentHeight;
                var position = 0;
                var imgWidth = 595.28;// A4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
                var imgHeight = 592.28 / contentWidth * contentHeight;
 
                var pageData = new Image();
                //設置圖片跨域訪問
                pageData.setAttribute('crossOrigin', 'Anonymous');
 
                setTimeout(() => {
                    pageData = canvas.toDataURL('image/jpeg', 1.0);
                    var PDF = new JsPDF('', 'pt', 'a4');
                    if (leftHeight < pageHeight) {
                        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            if (leftHeight > 0) {
                                PDF.addPage();
                            }
                        }
                    }
                    setTimeout(downloadPdfMsg, 500);// 關閉loading提示
                    PDF.save((fileName ? fileName : new Date().getTime()) + '.pdf');// 如果沒有傳入要生成的文件名，則預設使用當前時間戳作為文件名
                }, 1000);
            })
        }
    }
}