vue 页面打印到PDF

你可以使用 jsPDF 库来将 Vue 页面打印到 PDF。

以下是一个基本的示例：

1. 安装 jsPDF

npm install jspdf --save

2. 在 Vue 组件中引入 jsPDF 并创建一个打印函数

import jsPDF from "jspdf";

export default {
  methods: {
    printPage() {
      const pdf = new jsPDF();
      pdf.html(document.querySelector("#printable"), {
        callback: function () {
          pdf.save("print.pdf");
        },
      });
    },
  },
};

3. 在 Vue 模板中添加一个按钮，以触发打印函数

<template>
  <div>
    <!-- 其他页面内容 -->
    <div id="printable">
      <!-- 只需要打印此元素的内容 -->
      <h1>Hello, world!</h1>
      <p>This is a printable page.</p>
    </div>
    <button @click="printPage">Print to PDF</button>
  </div>
</template>

以上代码将在点击按钮时将 id 为 "printable" 的元素打印到 PDF 并将其保存在本地计算机上。你可以根据需求进一步调整代码，例如添加更多页面元素、自定义 PDF 文件名等。