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

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

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

/**
 * 通用html轉(zhuǎn)PDF文件
 * 
 * 需要先下載兩個(gè)插件，才可以正常使用
 * cnpm install --save html2canvas
 * cnpm install jspdf --save
 * 
 * 在需要使用的地方，直接調(diào)用this.getPdf(nodeName, fileName, scale, style)；
 * nodeName，頁面中需要轉(zhuǎn)成PDF文件的內(nèi)容部分定義id屬性，id屬性值
 * fileName，要生成的pdf文件名，不包含（pdf）擴(kuò)展名
 * scale，PDF文字的清晰度
 * style，自定義樣式，根據(jù)需要，可以傳入樣式對(duì)要打印的對(duì)象進(jìn)行一定的設(shè)定
 * 例如：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) {
            // 導(dǎo)出之前先將滾動(dòng)條置頂，不然會(huì)出現(xiàn)數(shù)據(jù)不全的現(xiàn)象
            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,
            });
            // 要轉(zhuǎn)化的數(shù)據(jù)
            var html2Pdf = nodeName ? document.querySelector(nodeName) : document.body;// 要轉(zhuǎn)換的數(shù)據(jù)（沒有傳入指定節(jié)點(diǎn)，則默認(rèn)轉(zhuǎn)換整個(gè)頁面）
            
            if (style) { // 如果傳入自定義樣式
                html2Pdf.style.cssText = style;
            }
 
            // 參數(shù)配置
            var opts = {
                allowTaint: true,//允許加載跨域的圖片
                taintTest: true, //檢測(cè)每張圖片都已經(jīng)加載完成
                scale: scale || 3, // 添加的scale 參數(shù)
                logging: false, //日志開關(guān)，發(fā)布的時(shí)候記得改成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();
                //設(shè)置圖片跨域訪問
                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);// 關(guān)閉loading提示
                    PDF.save((fileName ? fileName : new Date().getTime()) + '.pdf');// 如果沒有傳入要生成的文件名，則默認(rèn)使用當(dāng)前時(shí)間戳作為文件名
                }, 1000);
            })
        }
    }
}