最近在研究打印功能，学习了vue-plugin-hiprint，对于新手使用vue组件,会相对麻烦，而且缺乏vue版本的相关文档

安装vue-plugin-hiprint

npm install vue-plugin-hiprint

yarn add # vue-plugin-hiprint

配置样式文件

这一步防止画布渲染重叠

1. 从node_modules/vue-plugin-hiprint/dist/目录下复制一份print-lock.css到静态资源目录public下
2. 在 public/index.html 中添加样式如下图：

<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css"> 

<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

引入配置

import { hiprint } from "vue-plugin-hiprint";// 引入插件
import salesSlip from "./salesSlip.js";// 模板配置

配置数据

{ text: '客户', custom: "深圳腾讯科技有限公司", order: "MSD2308170021", product: '竹子大扫把', materialCode: '123456789', num: 1000, qrcode: 'QR87788374NC', barcode: '300542903711', modelnum: "11876453423" },

渲染说明

模板中设置的field中的值对应columns对应的字段

根据模板渲染视图和增加画布

    let hiprintTemplate = new hiprint.PrintTemplate({ template: salesSlip });
  // 打印
  hiprintTemplate.print(originalData1);// originalData1一个以上对象数组

感谢vue-plugin-hiprint作者