Vue3 ts如何使用vue-plugin-hiprint

Vue3 TypeScript 中使用 `vue-plugin-hiprint` 首先需要确保已经安装了 Vue3、TypeScript 和插件本身。以下是使用该插件的基本步骤：

1. **安装依赖**：
使用 npm 或 yarn 安装 `@vue/cli`（如果还没有），然后在项目中安装 `vue-plugin-hiprint`：

   npm install -D @vue/cli typescript vue-plugin-hiprint

2. **配置`vue.config.js`**：
在 `vue.config.js` 文件中引入并启用 TypeScript 支持，并添加对插件的配置：

   module.exports = {
     transpileDependencies: ['vue-hiprint'],
     // ...其他配置
   };

3. **在组件中导入并使用`Hiprint`组件**：
在你的 `.ts` 文件中，导入 `Hiprint` 组件：

   import { Hiprint } from 'vue-plugin-hiprint';

然后在组件里使用它：

   <template>
     <div>
       <Hiprint :options="printingOptions" />
     </div>
   </template>

   <script lang="ts">
   export default {
     components: {
       Hiprint,
     },
     data() {
       return {
         printingOptions: {}, // 根据需求设置打印选项
       };
     },
   };
   </script>

4. **提供打印选项**：
`printingOptions` 可能包含诸如标题、内容、页眉等属性，具体取决于插件的文档。例如：

   printingOptions: {
     title: '我的自定义报告',
     content: this.reportContent,
     header: {
       logoUrl: '/logo.png', // 图片路径
     },
   };

5. **运行项目**：
编译并运行项目，现在你可以通过触发组件上的事件（如点击按钮）来启动打印功能。