vue3项目中使用 hiprint_vue hiprint

基于 vue3 的打印

hiprint 打印官网 hiprint

hiprint 是一个web 打印的js组件，无需安装软件。支持移动端，PC端浏览器，angular,vue,react, 等 分页预览，打印，操作简单，运行快速。

在 vue3 项目中使用打印，是通过 vue3 的插件进行操作，可以通过官网地址 vue-plugin-hiprint 进行模版绘制

• 纸张大小 可以自行选择默认纸张 或者 自定义
  
• 页面设计可以通过调整右侧的样式调整合适大小
  
• 将打印模版加入项目中使用

1. 通过 npm 下载 vue-plugin-hiprint

npm i vue-plugin-hiprint
1

2. 在项目中引入 vue-plugin-hiprint

import { autoConnect, disAutoConnect, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
1

3. 在 script 方法中使用

let printData = ''
function outBoxPrintFn() {
	// 初始化
    hiprint.init({
        providers: [new defaultElementTypeProvider()]
    })
    // 调整配置
    hiprint.setConfig({
        showSizeBox: false,
    })
	let hiprintTemplate = new hiprint.PrintTemplate({
        template: {
            "panels": [
            // 这里放上面设计好的模版哟
            ]
        }
    })

	hiprintTemplate.print(printData)	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 打印完成