Vue3结合vue-plugin-hiprint实现自定义打印模板设计与布局

简介

在现代Web应用开发中，打印功能是不可或缺的一部分，尤其是在需要输出标准化文档的场景下。本文将详细介绍如何在Vue3项目中利用vue-plugin-hiprint插件实现一个可定制的打印模板设计器，并通过具体示例来展示其配置与使用方法。

技术栈

本项目基于以下技术栈：

Vue3
TypeScript (Ts)
Element Plus
Vite

插件安装

首先通过npm安装vue-plugin-hiprint插件：

npm install vue-plugin-hiprint

main.ts引入组件

在项目的入口文件main.ts中引入hiPrintPlugin并注册到Vue应用实例上。同时引入全局CSS（从node_modules/vue-plugin-hiprint/dist/目录下复制一份print-lock.css到静态资源目录下）。

import { createApp } from 'vue';
import App from './App.vue';
// 引入全局CSS  
import './assets/public/print-lock.css'  
import { hiPrintPlugin } from 'vue-plugin-hiprint';

hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
const app = createApp(App);
app.use(hiPrintPlugin, '$pluginName');

CSS样式配置

为了确保打印效果符合预期，在原有的print-lock.css基础上进行了扩展和调整，以适应不同的浏览器环境，尤其是Firefox浏览器中可能出现的打印重叠问题。如下是个人的iconfont.css，等会主组件要用，这里面的SVG字体样式后台评论区将提供:

@font-face {
  font-family: "iconfont"; /* Project id 3559670 */
  src: url("iconfont.woff2?t=1667531544868") format("woff2"),
    url("iconfont.woff?t=1667531544868") format("woff"),
    url("iconfont.ttf?t=1667531544868") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sv-edit-data:before {
  content: "\e655";
}

.sv-shimmer:before {
  content: "\e6d6";
}

.sv-origin:before {
  content: "\e6ac";
}

.sv-zIndex:before {
  content: "\e603";
}

.sv-structure:before {
  content: "\ec6f";
}

.sv-list:before {
  content: "\e742";
}

.sv-grid:before {
  content: "\e849";
}

.sv-flow:before {
  content: "\e611";
}

.sv-switch:before {
  content: "\e6f6";
}

.sv-theme:before {
  content: "\e644";
}

.sv-element:before {
  content: "\e615";
}

.sv-pdf:before {
  content: "\e67a";
}

.sv-browser:before {
  content: "\e726";
}

.sv-font-big:before {
  content: "\eb04";
}

.sv-font-small:before {
  content: "\eb05";
}

.sv-font-bold:before {
  content: "\ec83";
}

.sv-font-tiny:before {
  content: "\e6c1";
}

.sv-options:before {
  content: "\e607";
}

.sv-close:before {
  content: "\e646";
}

.sv-clone:before {
  content: "\ec7a";
}

.sv-cut:before {
  content: "\e643";
}

.sv-preview:before {
  content: "\e61c";
}

.sv-zoom-in:before {
  content: "\e60f";
}

.sv-zoom-out:before {
  content: "\e610";
}

.sv-edit:before {
  content: "\e6b9";
}

.sv-paste:before {
  content: "\e6c0";
}

.sv-copy:before {
  content: "\e6c2";
}

.sv-unlock:before {
  content: "\e6e7";
}

.sv-lock:before {
  content: "\e6e8";
}

.sv-zIndex-plus:before {
  content: "\e715";
}

.sv-zIndex-minus:before {
  content: "\e716";
}

.sv-zIndex-top:before {
  content: "\e71f";
}

.sv-sigh:before {
  content: "\e724";
}

.sv-ask:before {
  content: "\e725";
}

.sv-dev-code:before {
  content: "\e733";
}

.sv-bug:before {
  content: "\e73f";
}

.sv-zIndex-bottom:before {
  content: "\e71d";
}

.sv-new:before {
  content: "\e64d";
}

.sv-clear:before {
  content: "\e62d";
}

.sv-base:before {
  content: "\e7d0";
}

.sv-export:before {
  content: "\eabf";
}

.sv-import:before {
  content: "\eac0";
}

.sv-add:before {
  content: "\eaf3";
}

.sv-printer:before {
  content: "\eabe";
}

.sv-save:before {
  content: "\eabd";
}

.sv-more:before {
  content: "\e625";
}

.sv-menu:before {
  content: "\e628";
}

.sv-nav-right:before {
  content: "\e629";
}

.sv-nav-up:before {
  content: "\e62a";
}

.sv-nav-left:before {
  content: "\e62b";
}

.sv-nav-down:before {
  content: "\e62c";
}

.sv-setting:before {
  content: "\e62e";
}

.sv-delete:before {
  content: "\e630";
}

.sv-undo:before {
  content: "\e631";
}

.sv-redo:before {
  content: "\e632";
}

.sv-refresh:before {
  content: "\e634";
}

.sv-history:before {
  content: "\e635";
}

.sv-html:before {
  content: "\e633";
}

.sv-longText:before {
  content: "\e64c";
}

.sv-table:before {
  content: "\ec15";
}

.sv-qrcode:before {
  content: "\e642";
}

.sv-image:before {
  content: "\e8ba";
}

.sv-barcode:before {
  content: "\eb64";
}

.sv-text:before {
  content: "\e60b";
}

.sv-vline:before {
  content: "\e63a";
}

.sv-oval:before {
  content: "\eb99";
}

.sv-rect:before {
  content: "\e620";
}

.sv-hline:before {
  content: "\e60a";
}

.sv-print-c:before {
  content: "\e602";
}

.sv-print:before {
  content: "\e601";
}

.sv-c:before {
  content: "\e600";
}

.sv-vertical:before {
  content: "\e706";
}

.sv-distributeHor:before {
  content: "\e707";
}

.sv-right:before {
  content: "\e708";
}

.sv-left:before {
  content: "\e709";
}

.sv-distributeVer:before {
  content: "\e70f";
}

.sv-bottom:before {
  content: "\e710";
}

.sv-top:before {
  content: "\e711";
}

.sv-horizontal:before {
  content: "\e712";
}

.sv-rotate:before {
  content: "\e66f";
}

.sv-butongbu:before {
  content: "\e636";
}

.sv-synchronization:before {
  content: "\e676";
}
/* 重写全局 hiprint 样式 */
.hiprint-headerLine,
.hiprint-footerLine {
  border-color: purple !important;
}

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

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

.hiprint-footerLine:hover:before {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: purple;
  background: #ffff;
  top: -14px;
  font-size: 12px;
}
/* 区域 */
.left {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
.center {
  margin: 0 10px;
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 20px;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
.right {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
/* 左侧拖拽元素样式 */
.title {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  margin: 10px 0 0 24px;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 4px 10px;
  margin: 10px 8px 4px 8px;
  width: 38%;
  min-height: 60px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}
.item .iconfont {
  font-size: 1.5rem;
}
.item span {
  font-size: 14px;
}

/* scrollbar */
::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
::-webkit-scrollbar-corner {
  height: 4px;
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: purple;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
::-webkit-scrollbar-thumb:hover {
  background: purple;
}

/* flex */
.flex-row {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}

.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}

.ml-10 {
  margin-left: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}

button:hover {
  opacity: 1;
}
button i {
  font-size: 16px !important;
}
.circle,
.circle-4 {
  border-radius: 4px !important;
}
.circle-10 {
  border-radius: 10px !important;
}

/* modal */
.modal {
  padding: 0;
  margin: 0;
}
.modal .mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: #00000073;
}
.modal .wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: auto;
  background-color: #00000073;
  outline: 0;
}
.modal .wrap .box {
  position: relative;
  margin: 10% auto;
  width: 40%;
  background: #fff;
  border-radius: 4px;
  z-index: 1001;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.modal-box__header {
  padding: 10px 14px;
  border-bottom: 1px solid #e9e9e9;
}
.modal-box__footer {
  text-align: end;
}
.modal-box__footer button {
  min-width: 100px;
}
.modal-box__footer button:not(:last-child) {
  margin-right: 10px;
}

拖拽组件

为了提供更加丰富的设计体验，可以通过自定义拖拽组件来增强打印模板设计器的功能性。例如，这里customProvider.js：可以添加个人业务(追溯业务)相关的元素，如文本、条形码、二维码等。

import { hiprint } from "vue-plugin-hiprint";
export const iCustomProvider = function (options) {
    console.log(options.moduleList.value);
    var addElementTypes = function (context) {
        context.removePrintElementTypes("providerModule1");
        context.addPrintElementTypes("providerModule1", [
            new hiprint.PrintElementTypeGroup("追溯业务", [
                // options.config,
                ...options.moduleList.value.map(item => ({
                    tid: item.defaultModule,
                    title: item.title,
                    data: item.title,
                    type: item.type,
                    options: {
                        field: item.field,
                        height: 14,
                        testData: "默认",
                        fontSize: 12,
                        fontWeight: '500',
                        textAlign: 'center',
                        textContentVerticalAlign: 'middle',
                        ...(item.textType ? { textType: item.textType } : {}),
                    },
                })),
                {
                    tid: "providerModule1.text",
                    title: "文本",
                    data: "文本",
                    type: "text",
                    options: {
                        field: "customText",
                        testData: "文本",
                        height: 14,
                        fontSize: 12,
                        fontWeight: "500",
                        textAlign: "left",
                        textContentVerticalAlign: "middle",
                    },
                },
                {
                    tid: "providerModule1.barcode",
                    title: "条形码",
                    data: "XS888888888",
                    type: "text",
                    options: {
                        field: "barcode",
                        testData: "XS888888888",
                        height: 32,
                        fontSize: 12,
                        lineHeight: 18,
                        textAlign: "left",
                        textType: "barcode",
                    },
                },
                {
                    tid: "providerModule1.qrcode",
                    title: "二维码",
                    data: "XS888888888",
                    type: "qrcode",
                    options: {
                        field: "qrcode",
                        testData: "XS888888888",
                        height: 32,
                        fontSize: 12,
                        lineHeight: 18,
                        textType: "qrcode",
                    },
                },
            ]),
        ]);
    };
    return {
        addElementTypes: addElementTypes,
    };
};

主组件调用

在主组件中，我们使用el-drawer来显示打印模板的设计界面，引入上述我们创建好的customProvider.js和。此界面包括纸张尺寸的选择或自定义输入，以及打印、导出模板为JSON格式的功能按钮。

<el-drawer v-model="drawer" title="创建模板" size="100%" @opened="buildDesigner">
  <!-- 纸张尺寸选择区域 -->
  <el-button-group>
    <el-button 
      v-for="(value, type) in paperTypes" 
      :key="type" 
      :type="getButtonType(type)" 
      @click="setPaper(type, value)">
      {{ type }}
    </el-button>
    <!-- 自定义纸张尺寸输入框 -->
    <el-popover 
      v-model="paperPopVisible" 
      title="设置纸张宽高(mm)" 
      :width="240" 
      trigger="click">
      <!-- 输入框 -->
      <el-input 
        type="number" 
        v-model="paperWidth" 
        placeholder="宽(mm)">
      </el-input>
      <el-input 
        type="number" 
        v-model="paperHeight" 
        placeholder="高(mm)">
      </el-input>
      <el-button type="primary" @click="otherPaper">确定</el-button>
    </el-popover>
  </el-button-group>

  <!-- 功能按钮 -->
  <button @click.stop="print"><i class="iconfont sv-printer" />浏览器打印</button>
  <button @click.stop="exportJson"><i class="iconfont sv-export" />保存模板</button>
  
  <!-- 其他元素 -->
  <div id="hiprint-printTemplate"></div>
</el-drawer>
<script setup name="Template" lang="ts">
import { hiprint } from 'vue-plugin-hiprint';
import { iCustomProvider } from './customProvider'
// ...
// 当前纸张
const curPaper = ref({
      type: 'other',
      width: 80,
      height: 60
    });
// 纸张类型
const paperTypes = ref({
    'A3': {
      width: 420,
      height: 296.6
    },
    'A4': {
      width: 210,
      height: 296.6
    },
    'A5': {
      width: 210,
      height: 147.6
    },
    'B3': {
      width: 500,
      height: 352.6
    },
    'B4': {
      width: 250,
      height: 352.6
    },
    'B5': {
      width: 250,
      height: 175.6
    }
  });
// 自定义纸张
const paperPopVisible = ref(false);
const paperWidth = ref('80');
const paperHeight = ref('60');
// 计算按钮类型
const getButtonType = (type) => {
  return curPaper.value.type === type ? 'primary' : 'default';
};
const drawer = ref(false);
/**
 * 构建左侧可拖拽元素
 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
 * 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
 */
const buildLeftElement = () => {
  // eslint-disable-next-line no-undef
  // hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));

  $("#provider-container1").empty(); // 先清空, 避免重复构建
  // eslint-disable-next-line no-undef
  hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1");
};
/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
let hiprintTemplate;
const buildDesigner = () => {
  //构建拖拽元素
  buildLeftElement();
  // eslint-disable-next-line no-undef
  $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
  hiprintTemplate = new hiprint.PrintTemplate({
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
  });
  hiprintTemplate.design("#hiprint-printTemplate");
  if (data.form.templateJson) {
    mergeTemplate(data.form.templateJson);
  }
};

/**
 * 浏览器打印
 */
const print = () => {
  // 打印数据，key 对应 元素的 字段名
  let printData = { name: "CcSimple" };
  // 参数: 打印时设置 左偏移量，上偏移量
  let options = { leftOffset: -1, topOffset: -1 };
  // 扩展
  let ext = {
    callback: () => {
      console.log("浏览器打印窗口已打开");
    },
    styleHandler: () => {
      // 重写 文本 打印样式
      return "<style>.hiprint-printElement-text{color:red !important;}</style>";
    },
  };
  // 调用浏览器打印
  hiprintTemplate.print(printData, options, ext);
};
/**
 * 导出模板 json
 * 必须确保 hiprintTemplate 已成功创建
 */
const exportJson = () => {
  const jsonIns = hiprintTemplate.getJson();
  data.form.templateJson = JSON.stringify(jsonIns);
  drawer.value = false;
  validateTemplateJson();
};
/**
 * 导出模板 json tid
 * 仅导出 options, 不导出 printElementType
 * 必须确保 hiprintTemplate 已成功创建
 */
const exportJsonTid = () => {
  const jsonIns = hiprintTemplate.getJsonTid();
  console.log(jsonIns);
  alert("导出成功! 请查看控制台输出");
};
/**
 * 更新出新的模板内容
 */
const mergeTemplate = (jsonIn: string) => {
  if (hiprintTemplate) {
    try {
      hiprintTemplate.update(JSON.parse(jsonIn))
    } catch (e) {
      ElMessage.error(`更新失败: ${e}`)
    }
  }
};
/**
 * 设置纸张大小
 * @param type [A3, A4, A5, B3, B4, B5, other]
 * @param value {width,height} mm
 */
const setPaper = (type, value) => {
  try {
    // 更新当前纸张信息
    curPaper.value = {type: type, width: value.width, height: value.height};
    // 设置打印模板的纸张尺寸
    hiprintTemplate.setPaper(value.width, value.height);
  } catch (error) {
    ElMessage.error(`操作失败: ${error}`);
  }
};
  
// 触发模板数据的验证
const validateTemplateJson = () => {
  if (templateFormRef.value) {
    templateFormRef.value.validateField('templateJson').catch(() => { });
  }
};
/** 查询打印模板列表 */
const getList = async () => {
  loading.value = true;
  const res = await listTemplate(queryParams.value);
  templateList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}
/** 获取模板组件数据 **/
let moduleList = ref([]);
const templateModules = async () => {
  try {
    const res = await getTemplateModule();
    moduleList.value = res.data.style;
  } catch (error) {
    console.error('Failed to fetch template module:', error);
  }
};
    
onMounted(async () => {
  getList();
  await templateModules();
  hiprint.init({
    providers: [iCustomProvider({ moduleList: moduleList })]
  });
  buildDesigner();
});
</script>
<style>
@import '@/assets/css/iconfont.css';
</style>