vue3 实现自定义模板表单打印

写在前面

本项目基于 hiprint 和 vue-plugin-hiprint 实现，感谢大佬的分享

项目集成

安装

笔者项目是 vue3 的后台管理系统，使用包管理工具 pnpm 安装打印插件

bash 复制代码

pnpm add vue-plugin-hiprint

引入 css

安装成功后，需要在项目根目录的 index.html 引入打印组件样式文件print-lock.css，可以在node_modules/vue-plugin-hiprint/dist找到这个文件，复制出来放到根目录下，方便引入

html 复制代码

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

✨ 项目打包完后，可能会修改 css 文件名，这里需要保持文件名不变

引入插件

可以在项目入口 main 文件配置全局打印属性，也可以在需要的模块单独引入，因为涉及打印要抽离成单独模块，使用地方不多，只需要在需要的页面单独引入即可

vue 复制代码

import { hiprint } from "vue-plugin-hiprint"

页面设计

hiprint 只支持在官网设计好打印模板，导出 json 使用，不支持在系统内集成设计模块。vue-plugin-hiprint 示例项目已经实现了设计模块，我们可以把示例项目下载下来，根据需要选择设计模块，笔者选择的是自定义设计，最终实现页面大体如下：

初始化

在打印模板设计页面初始化完成后（onMounted），初始化插件

javascript 复制代码

function initHiprint() {
  hiprint.init({
    providers: [aProvider()]
  });

  $('.hiprintEpContainer').empty()
  hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'aProviderModule');
  $('#hiprint-printTemplate').empty()

  state.hiprintTemplate = new hiprint.PrintTemplate({
    template: state.templateInfo?.content || {},
    dataMode: 1,
    history: false,
    onDataChanged: (type, json) => {
      console.log(type, json)
    },
    onImageChooseClick: (target) => {
      console.log(target)
    },
    settingContainer: '#PrintElementOptionSetting',
    paginationContainer: '.hiprint-printPagination',
  })

  state.hiprintTemplate.design('#hiprint-printTemplate', {
    grid: true,
  });
  state.hiprintTemplate?.setPaper(state.curPaper.width, state.curPaper.height);
}

providers

这里设置打印模板的初始组件，也就是页面的左边区域，可以根据业务实际情况设置，vue-plugin-print也有导出默认组件defaultElementTypeProvider

template

这里面是一个大 json，保存打印模板的信息，默认情况为空，如果系统已经保存模板，则把已保存的模板放在这里

✨ 如果对模板要设置一些初始配置，可以先设计好模板，然后查看模板 json，把需要的配置信息提取出来，设置为初始化数据

其他

grid：true

页面显示网格线

setPaper

设置打印模板的尺寸

页眉，页脚高亮显示

在 css 里覆盖样式

css 复制代码

// 修改 页眉/页脚线 样式
.hiprint-headerLine,
.hiprint-footerLine {
  border-color: red !important;
}

.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
  border-top: 3px dashed red !important;
}

.hiprint-headerLine:hover:before {
  content: "页眉线";
  left: calc(50% - 18px);
  position: relative;
  background: #ffff;
  top: -12px;
  color: red;
  font-size: 12px;
}

.hiprint-footerLine:hover:before {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: red;
  background: #ffff;
  top: -12px;
  font-size: 12px;
}

图片

笔者模板里只有一个图片组件-logo，就直接在 css 将元素写死，这样拖拉组件时，也能实时显示图片

css 复制代码

// 默认图片样式
.hiprint-printElement-image-content {
  img {
    content: url('@/assets/logo.png');
  }
}

设计

仿照示例项目写好代码，接下来就是愉快🐶的拖拉拽环节

可以使用鼠标左键在页面内划取区域，批量移动已选组件的位置，如果需要精细化操作，也可以参考示例项目实现的组件对齐

✨ 组件如果需要一些默认设置，可以先在模板内设计好，通过查看 json 输出，然后在自定义 provider 中修改

预览

示例项目实现了预览组件，在模板页面引入组件<PrintView ref="printViewRef" />，通过printViewRef.value.show(state.hiprintTemplate, printData, state.curPaper.width)预览模板

选择打印，打开系统打印页面，完成打印

其他

最好根据票据尺寸，在设备管理里设置打印机的纸张尺寸，防止打印时候出现以外的结果