vue-plugin-hiprint使用教程

Vue-Plugin-HiPrint是一个用于Vue.js应用中的PDF打印插件。它简化了将HTML内容转换为PDF并直接预览或下载的过程。以下是基本的使用步骤：

1. **安装**:
首先，在你的Vue项目中通过npm或yarn安装插件：

   npm install vue-printer --save // 或者
   yarn add vue-printer

然后安装HiPrint的vue版本：

   npm install hi-printer --save-dev // 或者
   yarn add hi-printer --dev

2. **配置**:
在`main.js`或你的组件中，导入并注册HiPrint插件：

   import Vue from 'vue';
   import HiPrint from 'hi-printer/vue';

   Vue.use(HiPrint);

3. **使用**:
在需要生成PDF的组件上使用`v-print`指令，传入你想打印的内容和选项：

   <template>
     <div v-print="{ name: 'my-pdf', filename: 'report.pdf', landscape: true }">
       <!-- 你的HTML内容 -->
       这里放你要打印的内容...
     </div>
   </template>

   <script>
   export default {
     methods: {
       print() {
         this.$print('my-pdf'); // 直接触发打印
       }
     }
   };
   </script>

`v-print`支持自定义属性，如`name`设置pdf文件名，`filename`指定保存路径等。

4. **事件监听**:
如果你需要在打印完成时执行某些操作，可以利用`@print-success`或`@print-error`事件：

   <template>
     <button @click="print">点击打印</button>
   </template>

   <script>
   export default {
     methods: {
       print() {
         this.$print('my-pdf').then(() => {
           console.log('打印成功');
         }).catch((error) => {
           console.error('打印错误:', error);
         });
       }
     },
     events: {
       'print-success': 'onPrintSuccess',
       'print-error': 'onPrintError'
     },
     onPrintSuccess() {
       // 打印成功后的回调
     },
     onPrintError(error) {
       // 打印失败后的回调
     }
   };
   </script>