上海设计网站公司,交易网站怎么做,网站建设系统计公司,上海市场调研公司例图#xff1a;打印编号 一、安装Vue-Plugin-HiPrint
要开始使用 Vue-Plugin-HiPrint#xff0c;首先需要安装它。可以使用 npm npm install vue-plugin-hiprint --save 二、在main.js中引入 Vue-Plugin-HiPrint
在您的 main.js 或任何其他入口文件中#xff0c;您可以按…例图打印编号 一、安装Vue-Plugin-HiPrint
要开始使用 Vue-Plugin-HiPrint首先需要安装它。可以使用 npm npm install vue-plugin-hiprint --save 二、在main.js中引入 Vue-Plugin-HiPrint
在您的 main.js 或任何其他入口文件中您可以按以下方式引入它
1、main.js中引入
//打印hiprint
import {VuePluginHiPrint,disAutoConnect} from vue-plugin-hiprint;Vue.use(VuePluginHiPrint).mount(#app).$nextTick(() {disAutoConnect();})这会将 Vue-Plugin-HiPrint 注册为 Vue 插件使其可用于您的整个应用程序。
2、组件中引入
import {hiPrintPlugin } from vue-plugin-hiprint
三、创建打印模板
网址hiprint.io 建议将json保存到数据库中或者保存在字典数据中
四、引入样式
创建了打印模板后可以在Vue 组件中使用 Vue-Plugin-HiPrint 来触发打印操作。首先先要在项目的index.html文件中引入print-lock.css样式文件这个文件在node_modules/vue-plugin-hiprint/dist/目录。
注意需复制一份print-lock.css样式文件放到与index.html同级目录下否则打印样式有问题我复制在public文件夹中。在index.html文件中添加
!-- * 以处理打印所需css, 当然你也可以自行处理--
!-- * 比如 index.html目录下放一个print-lock.css, 然后在index.html添加:--
link relstylesheet typetext/css mediaprint href/public/print-lock.css
不加会出现样式问题例如批次打印都堆叠在第一页
五、组件中使用打印
使用按钮触发打印事件 el-col :span1.5el-button typewarning v-hasPermi[hm-cell-info:edit] plain iconedit clickhandleBatchPrint打印库位条形码/el-button/el-col //打印按钮
function handleBatchPrint(){hiPrintPlugin.disAutoConnect(); //取消自动打印直接连接客户端hiprint.init();//初始化let hiprintTemplate new hiprint.PrintTemplate({template: JSON.parse(printTemplate.value),});//printTemplate是打印模板jsonlet printData selectData.value;//选中数据数组console.log(打印数据,printData)hiprintTemplate.print(printData)//触发打印}
六、问题处理
错误一报错webSocket 解决方式在main.js中添加disAutoConnect方法 错误二条码重叠 解决方式index.html中导入print-lock.css样式
参考网址
【vue-plugin-hiprint】常见问题汇总① (qq.com)
