vue-plugin-hiprint 打印插件完整使用指南-优快云博客

vue-plugin-hiprint 打印插件完整使用指南

【免费下载链接】vue-plugin-hiprint hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑项目地址: https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint

项目概述

vue-plugin-hiprint 是一个基于 hiprint 2.5.4 的 Vue 打印插件，支持 Vue2.x 和 Vue3.x 版本。该插件提供了强大的打印设计功能，包括拖拽设计、可视化编辑、报表设计、元素编辑等特性。这是一个 JavaScript 工具库而非传统的 Vue 组件库，因此默认不包含 demo 中的组件页面，但 demo 代码可以复制使用。

环境要求

项目要求 Node.js 版本为 16.x，建议使用 Node Version Manager (NVM) 来管理 Node.js 版本。可以通过以下命令进行版本切换：

nvm install 16
nvm use 16

安装配置

安装插件

npm install vue-plugin-hiprint

样式文件配置

在 index.html 文件中必须添加打印所需样式：

<link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css" />

或者使用本地样式文件：

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

核心功能使用

拖拽设计模式（推荐）

import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";

// 初始化可拖拽的元素
hiprint.init({
  providers: [new defaultElementTypeProvider()],
});

// 构建拖拽元素
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));

// 创建打印模板
hiprintTemplate = new hiprint.PrintTemplate({
  template: {}, // 模板json
  settingContainer: "#PrintElementOptionSetting", // 元素参数容器
  paginationContainer: ".hiprint-printPagination", // 多面板容器
  dataMode: 1, // 1:getJson 其他：getJsonTid
  history: true, // 启用撤销重做功能
});

// 设计器容器
hiprintTemplate.design("#hiprint-printTemplate");

代码模式使用（不推荐）

import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";

hiprint.init();
var hiprintTemplate = new hiprint.PrintTemplate();
var panel = hiprintTemplate.addPrintPanel({
  width: 100,
  height: 130,
  paperFooter: 340,
  paperHeader: 10,
});

// 添加文本元素
panel.addPrintText({
  options: {
    width: 140,
    height: 15,
    top: 20,
    left: 20,
    title: "hiprint插件手动添加text",
    textAlign: "center",
  },
});

// 添加条形码
panel.addPrintText({
  options: {
    width: 140,
    height: 35,
    top: 40,
    left: 20,
    title: "123456",
    textType: "barcode",
  },
});

// 添加二维码
panel.addPrintText({
  options: {
    width: 35,
    height: 35,
    top: 40,
    left: 165,
    title: "123456",
    textType: "qrcode",
  },
});

Vue 全局引入

在 main.js 中进行全局引入：

import { hiPrintPlugin } from "vue-plugin-hiprint";
Vue.use(hiPrintPlugin, "$pluginName"); // $pluginName 为自定义名称

// 取消自动连接
hiPrintPlugin.disAutoConnect();

打印操作

浏览器预览打印

hiprintTemplate.print(
  this.printData,
  {},
  {
    callback: () => {
      console.log("浏览器打印窗口已打开");
    },
  }
);

直接打印

// 获取打印机列表
let printerList = hiprintTemplate.getPrinterList();

hiprintTemplate.print2(printData, {
  printer: "打印机名称",
  title: "打印标题"
});

// 打印成功回调
hiprintTemplate.on("printSuccess", function (data) {
  console.log("打印完成");
});

// 打印失败回调
hiprintTemplate.on("printError", function (data) {
  console.log("打印失败");
});

多语言支持

插件支持多种语言，可在初始化时设置：

hiprint.init({
  lang: "en", // 可选 ['cn', 'en', 'de', 'es', 'fr', 'it', 'ja', 'ru', 'cn_tw']
});

项目开发

克隆项目

git clone https://gitcode.com/gh_mirrors/vu/vue-plugin-hiprint
cd vue-plugin-hiprint
npm install

调试预览

npm run serve

打包插件

npm run build

常见问题解决方案

打印重叠/样式问题

确保正确添加了打印样式文件，并在打印时处理样式：

hiprintTemplate.print(
  this.printData,
  {},
  {
    styleHandler: () => {
      let css = '<link href="/print-lock.css" media="print" rel="stylesheet">';
      css += "<style>.hiprint-printElement-text{color:red !important;}</style>";
      return css;
    },
  }
);

取消自动连接

// 在 main.js 中设置
import { hiPrintPlugin } from "vue-plugin-hiprint";
Vue.use(hiPrintPlugin, "$hiprint", false);

// 或使用 disAutoConnect 方法
hiPrintPlugin.disAutoConnect();

线上部署跨域问题

部署到线上环境时，需要升级到 HTTPS 协议来解决跨域问题。

样式文件加载失败

将样式文件下载到本地项目目录中，并使用相对路径引用，避免 CDN 不稳定问题。

项目截图

注意事项

项目使用 Node.js 16.x 版本（开发使用 16.18.1）
vue-plugin-hiprint 与 hiprint.io 官网差异很大，请勿混用
请使用项目关联的打印客户端，或者自行修改打印客户端源码以适配本项目模板
线上部署时出现跨域无法连接打印客户端问题，需要升级 HTTPS

项目结构

src/
├── demo/          # 示例代码
├── hiprint/       # 核心打印功能
├── i18n/          # 多语言文件
├── utils/         # 工具函数
├── App.vue        # 主应用组件
├── main.js        # 应用入口
└── index.js       # 插件入口

通过本指南，您可以全面了解 vue-plugin-hiprint 插件的使用方法，快速上手打印功能的开发。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考