HjkPrintWindows 打印组件

HjkPrintWindows 是一个基于 Vue.js 的打印组件，支持自定义打印模板和数据打印。

安装

npm install hjk-windows-print

使用

全局注册

import HjkPrintWindows from "hjk-windows-print";
Vue.use(HjkPrintWindows, { url: "http://www.xxx.com/xxx/" });

组件使用

<template>
	<div>
		<button @click="handlePrint">打印</button>
		<HjkPrintWindows></HjkPrintWindows>
	</div>
</template>

<script>
export default {
	methods: {
		handlePrint() {
			const data = [
				{
					receiptNumber: "CG20250213001",
					createTime: "2025-02-13 09:02:58",
					materialsSupplierName: "供应商名称",
					// ... 其他数据
				},
			];
			HjkPrintWindows.print(data, "打印模板URL 或者 html文件名称");
            HjkPrintWindows.open = (e)=>{
                console.log("window.print()调用成功后，执行此方法")
            }
            HjkPrintWindows.close = (e)=>{
                console.log("window.print()窗口关闭后，执行此方法")
            }
            HjkPrintWindows.error = (e)=>{
                console.error("HjkPrintWindows.print()执行报错后，执行此方法")
            }
		},
	},
};
</script>

html模版

<div style="padding: 10mm;width: 190mm;height: 120mm;" v-for="(item,index) in param">
    <div style="display: flex;justify-content: space-between;width: 190mm;">
        <div style="width: 40mm;"></div>
        <div style="font-size: 15px;font-weight: 700;">标题</div>
        <div style="width: 40mm;font-size: 12px;">姓名:{{ name }}</div>
    </div>
</div>

<script>
    // vueHandler名称固定，目前仅支持data、mounted、methods
    const vueHandler = {
        data: {
            name: "张三"
        },
        mounted() {
            console.log("name:", this.name)
            this.init();
        },
        methods: {
            init() {
                console.log("执行了init")
            }
        }
    }
</script>

注意事项

1. 打印模板 URL 必须是可访问的
2. 打印数据必须是数组格式
3. 建议在打印前进行数据验证
4. 可以通过事件监听处理打印过程中的状态变化
5. vue.config.js 需开启 runtimeCompiler: true，或者如下配置

module.exports = {
  runtimeCompiler: false,  // 禁用运行时编译（默认）
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.runtime.esm.js'  // 强制使用运行时构建版本
      }
    }
  }
}

开发

项目结构

src/
  ├── lib/
  │   ├── HjkPrintWindows.vue      # 主组件
  │   ├── HjkPrintWindows.css      # 样式文件
  │   ├── HjkPrintWindows.scss     # SCSS样式文件
  │   ├── HjkPrintWindows.min.css  # 压缩后的样式文件
  │   ├── HjkPrintWindowsTools.js  # 工具函数
  │   └── index.js                 # 入口文件
  ├── App.vue                      # 示例应用
  └── main.js                      # 主入口文件

依赖

• vue-print-nb: 打印功能依赖
• Vue.js: 框架依赖

贡献

欢迎提交 Issue 和 Pull Request。

许可证

MIT