vue3 print.js打印实现页脚内容自定义

Vue3 中使用 `print.js` 实现页脚内容自定义通常涉及到在模板中设置特定的数据，在组件渲染完成后，利用 `print.js` 的钩子函数来自定义打印的行为。以下是基本步骤：

1. 首先，你需要在项目中安装 `print.js` 库，可以使用 npm 或 yarn 进行安装：

   npm install print-js

2. 在 Vue 组件中导入 `print.js`，并在模板中设置你想在页脚显示的内容。例如，假设你想显示当前日期：

   <template>
     <button @click="printPDF">打印</button>
     <div v-if="showFooter" class="footer">{{ currentDateTime }}</div>
   </template>

在数据选项里添加变量存储日期等信息：

   export default {
     data() {
       return {
         showFooter: true,
         currentDateTime: new Date().toLocaleDateString(),
       };
     },
   }

3. 当点击打印按钮时，触发打印函数，并使用 `print.js` 设置页面和页脚内容：

   methods: {
     async printPDF() {
       const options = {
         type: 'pdf', // 输出类型，这里是 PDF
         margin: { top: 0, bottom: 50 }, // 自定义边距
         headerContent: '', // 清空默认页眉
         footerContent: '<div>当前日期: {{ currentDateTime }}</div>', // 定义页脚内容
       };

       await this.$print(options); // 执行打印操作
     },
   },

4. 使用 `this.$print` 而不是直接 `window.print()` 可以让你更精细地控制打印过程。