在Vue项目中实现HTML转PDF功能的详细步骤

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 转换为 base64 图片格式

        // 设置 PDF 的尺寸
        const pdfWidth = (contentWidth * 0.75) / 2; // 转换为 pt 单位
        const pdfHeight = (contentHeight * 0.75) / 2 + 15; // 加上一定的底部留白

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

        // 计算图片在 PDF 中的位置和尺寸
        const imgWidth = pdfWidth - 20; // 图片宽度减去左右边距
        const imgHeight = (contentHeight * imgWidth) / contentWidth; // 根据图片宽高比计算图片高度
        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>这是要转换的内容</h1>
      <p>你可以在这里放置任何需要转换为 PDF 的 HTML 元素。无论是文字、图片还是表格，都可以一键转换为 PDF 格式，方便分享和保存。</p>
      <img src="https://via.placeholder.com/150" alt="示例图片">
      <table>
        <tr>
          <th>项目</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>html2canvas</td>
          <td>用于将 HTML 元素转换为 canvas 图像</td>
        </tr>
        <tr>
          <td>jsPDF</td>
          <td>用于将 canvas 图像转换为 PDF 文件</td>
        </tr>
      </table>
    </div>
    <el-button type="primary" @click="exportToPdf">导出为 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;

  // 计算需要多少页
  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`);
});