vue使用html2canvas jspdf导出pdf

Vue使用html2canvas和jsPDF可以实现将网页内容导出为PDF文件的功能。具体步骤如下：

1.安装html2canvas和jsPDF库，可以使用npm或yarn进行安装。

2.在需要导出PDF的组件中引入html2canvas和jsPDF库。

3.封装一个方法，使用html2canvas将需要导出的内容转换为canvas，再使用jsPDF将canvas转换为PDF文件并下载。

下面是一个示例代码：

<template>
  <div>
    <!-- 需要导出为PDF的内容 -->
    <div ref="content">
      <h1>Hello, World!</h1>
      <p>This is a PDF export example.</p>
    </div>
    <button @click="exportPDF">Export PDF</button>
  </div>
</template>

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

export default {
  methods: {
    exportPDF() {
      // 获取需要导出的内容
      const content = this.$refs.content;

      // 使用html2canvas将内容转换为canvas
      html2canvas(content).then(canvas => {
        // 将canvas转换为PDF文件
        const pdf = new jsPDF('p', 'mm', 'a4');
        const imgData = canvas.toDataURL('image/png');
        pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
        pdf.save('export.pdf');
      });
    }
  }
};
</script>