npm install html2canvas jspdf

<template>
  <div>
    <!-- 選擇頁(yè)面大小的下拉框 -->
    <select v-model="selectedPageSize">
      <option value="a4">A4</option>
      <option value="a3">A3</option>
      <option value="letter">Letter</option>
    </select>
    <!-- 選擇頁(yè)面方向的下拉框 -->
    <select v-model="selectedPageOrientation">
      <option value="portrait">縱向</option>
      <option value="landscape">橫向</option>
    </select>
    <!-- 導(dǎo)出 PDF 的按鈕 -->
    <button @click="exportToPDF">導(dǎo)出為 PDF</button>
    <!-- 需要導(dǎo)出為 PDF 的內(nèi)容區(qū)域 -->
    <div id="contentToExport">
      <h1>這是要導(dǎo)出為 PDF 的內(nèi)容</h1>
      <p>可以在這里添加更多文本、圖片、表格等元素。</p>
    </div>
  </div>
</template>

<script>
// 引入 html2canvas 用于將 HTML 元素轉(zhuǎn)換為 canvas 圖像
import html2canvas from 'html2canvas';
// 引入 jsPDF 用于創(chuàng)建和保存 PDF 文件
import jsPDF from 'jspdf';

export default {
  data() {
    return {
      // 存儲(chǔ)用戶選擇的頁(yè)面大小，默認(rèn)為 A4
      selectedPageSize: 'a4',
      // 存儲(chǔ)用戶選擇的頁(yè)面方向，默認(rèn)為縱向
      selectedPageOrientation: 'portrait'
    };
  },
  methods: {
    async exportToPDF() {
      // 獲取需要導(dǎo)出為 PDF 的 HTML 元素
      const element = document.getElementById('contentToExport');
      try {
        // 使用 html2canvas 將 HTML 元素轉(zhuǎn)換為 canvas 圖像
        const canvas = await html2canvas(element);
        // 將 canvas 圖像轉(zhuǎn)換為 base64 編碼的 PNG 圖片數(shù)據(jù)
        const imgData = canvas.toDataURL('image/png');

        // 根據(jù)用戶選擇的頁(yè)面大小和方向創(chuàng)建 jsPDF 實(shí)例
        const pdf = new jsPDF({
          orientation: this.selectedPageOrientation, // 頁(yè)面方向
          unit: 'mm', // 單位為毫米
          format: this.selectedPageSize // 頁(yè)面大小
        });

        // 獲取 PDF 頁(yè)面的寬度和高度
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = pdf.internal.pageSize.getHeight();

        // 計(jì)算圖像的寬度和高度，使圖像按比例適應(yīng)頁(yè)面
        const imgWidth = pdfWidth;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        let heightLeft = imgHeight;
        let position = 0;

        // 將圖像添加到第一頁(yè) PDF
        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pdfHeight;

        // 如果圖像高度超過(guò)一頁(yè)，進(jìn)行分頁(yè)處理
        while (heightLeft >= 0) {
          position = heightLeft - imgHeight;
          pdf.addPage();
          pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
          heightLeft -= pdfHeight;
        }

        // 保存 PDF 文件，文件名為 exported.pdf
        pdf.save('exported.pdf');
      } catch (error) {
        // 捕獲并打印導(dǎo)出過(guò)程中可能出現(xiàn)的錯(cuò)誤
        console.error('導(dǎo)出 PDF 時(shí)出錯(cuò):', error);
      }
    }
  }
};
</script>

<style scoped>
/* 為需要導(dǎo)出的內(nèi)容區(qū)域添加樣式 */
#contentToExport {
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 20px;
}
</style>

<template>
  <div>
    <ExportPDF />
  </div>
</template>

<script>
import ExportPDF from './ExportPDF.vue';

export default {
  components: {
    ExportPDF
  }
};
</script>