vue实现将页面内容转换并下载为PDF

<template>
  <div>
    <div id="contentToConvert">
      <!-- 这里是你要转换为 PDF 的内容 -->
      <h1>示例内容</h1>
      <p>这是一段用于测试页面转 PDF 的示例文本。</p>
      <p>这里可以添加更多内容，当内容超出一页时会自动分页。</p>
    </div>
    <button @click="convertToPdf">下载 PDF</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    async convertToPdf() {
      const element = document.getElementById('contentToConvert');
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgWidth = 210; // A4 纸的宽度（mm）
      const pageHeight = 295; // A4 纸的高度（mm）
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;
      let position = 0;

      // 添加第一页
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      // 处理分页
      while (heightLeft >= 0) {
        position -= pageHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      // 下载 PDF
      pdf.save('page.pdf');
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需求添加 */
</style>

来源：豆包