npm install html2canvas jspdf

import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

export default {
  install(Vue, options) {
    Vue.prototype.ExportSavePdf = function (domId, fileName = 'download') {
      const element = document.getElementById(domId);
      html2canvas(element, {
        logging: false,
        scale: 2, // 縮放因子，提高圖片清晰度
      }).then((canvas) => {
        const contentWidth = element.offsetWidth; // 獲取元素寬度
        const contentHeight = element.offsetHeight; // 獲取元素高度
        const pageData = canvas.toDataURL('image/jpeg', 1.0); // 將 canvas 轉(zhuǎn)換為 base64 圖片格式

        // 設(shè)置 PDF 的尺寸
        const pdfWidth = (contentWidth * 0.75) / 2; // 轉(zhuǎn)換為 pt 單位
        const pdfHeight = (contentHeight * 0.75) / 2 + 15; // 加上一定的底部留白

        // 初始化 jsPDF
        const pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);

        // 計(jì)算圖片在 PDF 中的位置和尺寸
        const imgWidth = pdfWidth - 20; // 圖片寬度減去左右邊距
        const imgHeight = (contentHeight * imgWidth) / contentWidth; // 根據(jù)圖片寬高比計(jì)算圖片高度
        pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight); // 將圖片添加到 PDF 中
        pdf.save(`${fileName}.pdf`); // 保存 PDF 文件
      });
    };
  },
};

import Vue from 'vue';
import App from './App.vue';
import htmlToPdf from './utils/htmlToPdf';

Vue.config.productionTip = false;

Vue.use(htmlToPdf);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

<template>
  <div>
    <div id="contentToConvert">
      <h1>這是要轉(zhuǎn)換的內(nèi)容</h1>
      <p>你可以在這里放置任何需要轉(zhuǎn)換為 PDF 的 HTML 元素。無(wú)論是文字、圖片還是表格，都可以一鍵轉(zhuǎn)換為 PDF 格式，方便分享和保存。</p>
      <img src="https://via.placeholder.com/150" alt="示例圖片">
      <table>
        <tr>
          <th>項(xiàng)目</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>html2canvas</td>
          <td>用于將 HTML 元素轉(zhuǎn)換為 canvas 圖像</td>
        </tr>
        <tr>
          <td>jsPDF</td>
          <td>用于將 canvas 圖像轉(zhuǎn)換為 PDF 文件</td>
        </tr>
      </table>
    </div>
    <el-button type="primary" @click="exportToPdf">導(dǎo)出為 PDF</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    exportToPdf() {
      this.ExportSavePdf('contentToConvert', '我的PDF文檔');
    },
  },
};
</script>

#contentToConvert {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

#contentToConvert h1 {
  color: #0066cc;
  text-align: center;
}

#contentToConvert table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#contentToConvert table th,
#contentToConvert table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#contentToConvert table th {
  background-color: #f2f2f2;
}

html2canvas(element, {
  logging: false,
  scale: 2,
}).then((canvas) => {
  const contentWidth = element.offsetWidth;
  const contentHeight = element.offsetHeight;
  const pageData = canvas.toDataURL('image/jpeg', 1.0);

  const pdfWidth = (contentWidth * 0.75) / 2;
  const pdfHeight = (contentHeight * 0.75) / 2 + 15;

  const pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);

  const imgWidth = pdfWidth - 20;
  const imgHeight = (contentHeight * imgWidth) / contentWidth;

  // 計(jì)算需要多少頁(yè)
  const totalPages = Math.ceil(imgHeight / pdfHeight);

  for (let i = 0; i < totalPages; i++) {
    const pageY = i * pdfHeight;
    pdf.addImage(pageData, 'JPEG', 10, 10 + pageY, imgWidth, imgHeight);
    if (i < totalPages - 1) {
      pdf.addPage();
    }
  }

  pdf.save(`${fileName}.pdf`);
});