Vue前端HTML保存爲PDF的兩種經常使用方式 「乾貨分享」

Vue前端HTML保存爲PDF經常使用方式有兩種。

1. 使用html2Canvas和JsPDF庫，轉化爲圖片後保存PDF。
2. 調用瀏覽器window.print()，而後手動保存爲PDF。

第一種

優勢

• 沒有預覽點擊便可保存
• 不須要手動配置保存
• 可選取部分Dom保存

缺點

• 較不清晰
• 須要先轉化爲圖片
• 沒有提早預覽
• 不適合保存過長分頁內容
• 依賴html2Canvas和JsPDF庫

第二種

優勢

• 能夠提早預覽
• 適合保存過長分頁內容比較合適
• 直接由瀏覽器API保存，內容清晰
• 開發便利快速。

缺點

• 第一次須要在預覽框手動配置參數
• 須要手動點擊保存
• 會有Print預覽彈窗
• 不可選取部分Dome，只能保存當前整頁面。

第一種:使用html2Canvas和JsPDF庫，轉化爲圖片後保存PDF。

1. 安裝html2canvas庫 npm install html2canvas
2. 安裝jspdf庫 npm install jspdf
3. 編寫保存函數 文件位置：src/utils/htmlToPdf.js

/** path: src/utils/htmlToPdf.js name: 導出頁面爲PDF格式 **/
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

const htmlToPdf = {
    getPdf(title) {
        html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true,
        }).then(canvas=>{
            //內容的寬度
            let contentWidth = canvas.width;
            //內容高度
            let contentHeight = canvas.height;
            //一頁pdf顯示html頁面生成的canvas高度,a4紙的尺寸[595.28,841.89];
            let pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html頁面高度
            let leftHeight = contentHeight;
            //頁面偏移
            let position = 0;
            //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
            let imgWidth = 595.28;
            let imgHeight = 592.28 / contentWidth * contentHeight;
            //canvas轉圖片數據
            let pageData = canvas.toDataURL('image/jpeg', 1.0);
            //新建JsPDF對象
            let 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()
                    }
                }
            }
            //保存文件
            PDF.save(title + '.pdf')
        })
    }
};

export default htmlToPdf;

複製代碼

1. 使用函數，文件位置src/views/PdfPage1.vue

<template>
    <div id="PdfPage1">
        <button type="button" class="btn btn-primary" @click="pdfBtn">導出PDF</button>
        <div id="pdfDom" style="padding:10px;background-color:#fff;">
            <img alt="Vue logo" src="@/assets/logo.png">
            <h1>Welcome to Your Vue.js App</h1>
            <p v-for="(item,index) in 5" :key="index">{{item}}Welcome to Your Vue.js App</p>
        </div>
    </div>
</template>

<script> import htmlToPdf from '@/utils/htmlToPdf' export default { name: "PdfPage", data(){ return{ htmlTitle:'頁面導出PDF文件名', } }, methods:{ pdfBtn(){ htmlToPdf.getPdf(this.htmlTitle); } } } </script>

<style scoped>
</style>
複製代碼

第二種:調用瀏覽器window.print()，而後手動保存爲PDF。

1. 代碼位置：src/views/PdfPage2.vue

<template>
    <div id="PdfPage2">
        <div class="no-print">
            <button type="button" class="btn btn-primary" @click="pdfBtn">導出PDF</button>
        </div>
        <div id="pdfDom" style="padding:10px;background-color:#fff;">
            <img alt="Vue logo" src="@/assets/logo.png">
            <h1>Welcome to Your Vue.js App</h1>
            <p v-for="(item,index) in 5" :key="index">{{item}}Welcome to Your Vue.js App</p>
        </div>
    </div>
</template>

<script> export default { name: "PdfPage2", methods:{ pdfBtn(){ window.print(); } } } </script>

<style scoped> /*保存時的樣式*/ /* 瞭解更多可 百度CSS print樣式 */ @media print{ .no-print{ display: none; } } /*打印頁配置*/ @page{ margin:60px 10px; } </style>

複製代碼

做者：天小天