vue3+ts 使用vue-plugin-hiprint

Vue3 + TypeScript 中使用 Vue-Plugin-HiPrint 这个插件，可以帮助你在 Vue 应用中方便地生成 PDF 或 HTML 格式的文档。HiPrint 是一个轻量级的打印解决方案，它提供了预览、下载、以及自定义样式等功能。

以下是使用步骤概述：

1. **安装插件**：首先，在项目中安装 `vue-hiprint`。你可以使用 npm 或 yarn 安装：

   npm install vue-printer vue-plugin-hiprint
   # 或者
   yarn add vue-printer vue-plugin-hiprint

2. **配置 TypeScript**：引入并配置 HiPrint 的类型支持：

   import { createPrinter } from 'vue-printer';
   import HiPrint from 'vue-plugin-hiprint';

   // 在入口文件或组件中全局注册 HiPrint
   Vue.use(HiPrint);
   Vue.prototype.$createPrinter = createPrinter;

3. **在组件中使用**：
创建一个按钮或者链接，当点击时会触发打印功能。例如：

   <template>
     <button @click="printDocument">生成PDF</button>
   </template>

   <script setup lang="ts">
   import { onMounted } from 'vue';
   
   const printDocument = async () => {
     const printer = await this.$createPrinter();
     await printer.print({
       html: '<h1>Hello, World!</h1>', // 可以替换为你需要渲染的内容
       title: 'My Document', // 文件标题
       filename: 'document.pdf', // 下载文件名
       type: 'pdf', // 输出类型，如 'pdf' 或 'html'
     });
   };
   </script>