vue中用vue-pdf将一个div标签内容转换成PDF并下载

在Vue.js中，可以利用`vue-pdf`这个库将HTML内容转换成PDF并提供下载。`vue-pdf`是一个轻量级的Vue组件，用于渲染PDF文件，支持从字符串、URL、本地文件路径和HTML内容生成PDF。

首先，你需要安装`vue-pdf`和`jsPDF`依赖：

npm install vue-pdf jsPDF

然后，在你的项目中创建一个Vue组件，例如`PdfGenerator.vue`：

<template>
  <div ref="pdfContent" class="pdf-container">
    <!-- 这里放需要转换成PDF的div内容 -->
    <div v-html="htmlToConvert"></div>
  </div>
</template>

<script>
import Vue from 'vue';
import { PDFViewer } from '@vue-pdf/vue-pdf';

export default {
  components: {
    PDFViewer,
  },
  data() {
    return {
      htmlToConvert: '<h1>这是一段示例文字</h1>', // 替换为你实际的div内容
    };
  },
  mounted() {
    this.generatePdf();
  },
  methods: {
    generatePdf() {
      const pdfDoc = new jsPDF(); // 初始化一个PDF文档
      const contentWidth = this.$refs.pdfContent.scrollWidth; // 获取div的内容宽度
      pdfDoc.addImage(this.htmlToConvert, 'JPEG', 0, 0, contentWidth, this.$refs.pdfContent.clientHeight); // 将HTML转换为PDF并添加到文档
      pdfDoc.save('output.pdf'); // 下载PDF
    },
  },
};
</script>

在这个例子中，我们在页面加载完成后调用`generatePdf()`方法，它会获取`ref="pdfContent"`下的内容，并通过`jsPDF`将其转换为PDF。最后，通过`save()`方法将PDF保存为名为`output.pdf`的文件供用户下载。