使用 Vue转为pdf 来实现打印功能

要在 Vue 中实现打印功能并将页面转换为 PDF，你可以结合使用 jsPDF 和 html2canvas 库。jsPDF 用于生成 PDF 文件，而 html2canvas 用于将 Vue 组件转换为图片。

首先，确保你已经安装了 jsPDF 和 html2canvas。可以通过以下命令使用 npm 安装它们：

npm install jspdf html2canvas

接下来，你可以创建一个 Vue 组件，并在其中添加打印功能。以下是一个示例：

<template>
  <div id="app">
    <h1>打印功能示例</h1>

    <!-- 打印按钮 -->
    <button @click="printFunction">打印</button>

    <!-- 需要打印的内容 -->
    <div ref="printContent">
      <p>这是需要打印的内容。</p>
      <p>你可以在这里添加更多内容。</p>
    </div>
  </div>
</template>

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

export default {
  methods: {
    printFunction() {
      // 获取需要打印的内容
      const printContent = this.$refs.printContent;

      // 创建一个新的 jsPDF 实例
      const doc = new jsPDF();

      // 使用 html2canvas 将组件转换为图片
      html2canvas(printContent).then((canvas) => {
        const imageData = canvas.toDataURL("image/png");

        // 将图片添加到 PDF 中
        doc.addImage(imageData, "PNG", 10, 10, 190, 0);

        // 保存或打印 PDF
        doc.save("打印内容.pdf");
      });
    },
  },
};
</script>

在这个示例中，我们首先导入了 jsPDF 和 html2canvas 库。在 `printFunction` 方法中，我们使用 `this.$refs` 来获取需要打印的内容的引用。然后，我们创建一个新的 jsPDF 实例，并使用 html2canvas 将组件转换为图片。将图片添加到 PDF 中后，我们可以通过 `doc.save()` 方法保存或打印生成的 PDF。

请注意，为了使用这个示例，你需要将其放在一个 Vue 组件中。你可以根据自己的需求修改组件的模板和样式。

希望对你有所帮助！