Vue+ElementUI 匯出為PDF檔案

JoeYoung發表於2024-11-19
VueUI

在ElementUI中匯出PDF通常涉及將頁面上的DOM元素轉換為PDF格式的檔案。這一過程可以透過結合使用 html2canvas 和 jsPDF 這兩個JavaScript庫來實現。

步驟：

1、安裝依賴

在專案中安裝html2canvas和jsPDF這兩個庫。可以透過npm進行安裝：

npm install html2canvas jspdf

2、建立匯出函式

建立一個JavaScript檔案（例如 htmlToPdf.js），並在其中定義匯出PDF的函式。以下是一個示例函式：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export function getPdf(elementId, pdfName) {
    const element = document.getElementById(elementId);
    
    html2canvas(element, {
        useCORS: true, // 允許跨域請求外部連結圖片
        allowTaint: true // 允許canvas汙染
    }).then(canvas => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        
        const pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        const imgWidth = 595.28;
        const imgHeight = (contentHeight * imgWidth) / contentWidth;
        
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        
        const 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(pdfName + '.pdf');
    }).catch(error => {
        console.error('Error during PDF generation:', error);
    });
}

3、在Vue元件中使用

在需要匯出PDF的Vue元件中引入並使用這個函式。

例如：

<template>
    <div>
        <!-- 要匯出的內容 -->
        <div id="exportContent">
            <!-- 這裡放置要匯出的HTML內容 -->
        </div>
        <!-- 匯出按鈕 -->
        <el-button type="primary" @click="exportPdf">匯出PDF</el-button>
    </div>
</template>

<script>
import { getPdf } from './htmlToPdf'; // 引入匯出的函式

export default {
    methods: {
        exportPdf() {
            getPdf('exportContent', '匯出的檔名'); // 呼叫匯出函式，並傳入要匯出的DOM元素的ID和PDF檔名
        }
    }
}
</script>

4、注意事項

  • 分頁處理：如果匯出的內容超過一頁，需要處理分頁邏輯。上面的示例程式碼中已經包含了分頁處理的邏輯。
  • 樣式調整：為了確保匯出的PDF檔案樣式正確，可能需要對要匯出的DOM元素進行樣式調整。例如，可以使用CSS來控制元素的佈局和樣式。
  • 跨域問題：如果匯出的內容中包含跨域的圖片或其他資源，需要確保伺服器允許跨域請求，或者在html2canvas的配置中設定useCORS: true。
  • 捲軸處理：如果匯出的內容在頁面中存在捲軸，需要確保在生成PDF時能夠正確處理捲軸的位置和大小。

相關文章