vue-plugin-hiprint 打印模版使用

下面是使用效果图，主要用于一些文档资料的模版生成
vue-plugin-hiprint 文档及 Demo

插件安装

npm install vue-plugin-hiprint

npm install jquery --save

在项目的index.html里加入样式

<!-- 打印模版 -->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">

在Index.html同层的public下放print-lock.css文件，可以在演示项目里找样式文件，也可以复制本文下面的print-lock.css

使用页面，我是用jquery获取的元素，也可以直接用js直接获取
providers.js和printData.js的代码在最下面
providers.js和printData.js的代码在最下面

import { ***puted, onMounted, ref } from 'vue';
import { hiprint, hiPrintPlugin } from 'vue-plugin-hiprint';
import printData from './print-data'//元素对应的数据，根据实际需求变化
import providers from './providers'//拖拽元素
import $ from 'jquery';
let hiprintTemplate;
let templateModel = ref();// 模版对象
const init = () => {
  // 初始化可拖拽的元素，可参考vue-plugin-hiprint 文档及 Demo里的代码
  const provider = providers[0];//切换这个就能切换拖拽元素
  hiprint.init({
    providers: [provider.f],
  });
  const modeldata = templateJson || {};//回显已保存的模版json
  hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
  $('.ep-draggable-item').empty(); // 清空配置
  hiprint.PrintElementTypeManager.build('.ep-draggable-item', provider.value);
  $('#hiprint-printTemplate').empty(); // 清空内容
  templateModel.value = hiprintTemplate = new hiprint.PrintTemplate({
    template: modeldata, // 回显模板json
    settingContainer: '#PrintElementOptionSetting', // 元素参数容器
    paginationContainer: '.hiprint-printPagination', // 多面板的容器， 实现多面板， 需要在添加一个 <div class="hiprint-printPagination"/>
    // ------- 下列是可选功能 -------
    // 图片选择功能
    onImageChooseClick: (target) => {
    	// 将选取的图片直接转成base64
     // let input = document.createElement("input");
     //  input.setAttribute("type", "file");
     // input.click();
     //  input.onchange = function () {
     //    var file = this.files[0];
     //    var reader = new FileReader();
     //    if (file) {
     //      var reader = new FileReader();
     //      //通过文件流行文件转换成Base64字行串
     //      reader.readAsDataURL(file);
     //      //转换成功后
     //      reader.onloadend = function () {
     //        // 通过 target.refresh 更新图片元素
     //        target.refresh(reader.result);
     //      };
     //    }
     //  };
     //  input.remove();
      // 将选取的图片通过接口转成base64替换到模版JSON里去，我这是需求导致，不需要的可以用上面的方法
      console.warn('图片选择', target);
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('a***ept', 'image/*'); // 仅允许选择图片文件
      input.click();

      input.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;

        // 校验文件类型
        if (!file.type.startsWith('image/')) {
          console.warn('请选择图片文件（支持jpg、png、webp等格式）');
          return;
        }
        console.warn('图片文件', file);

        // 准备FormData（若服务器要求multipart/form-data）
        const formData = new FormData();
        formData.append('file', file); // 字段名'file'需与服务器保持一致

        fetch('图片上传路径', {
          method: 'POST',
          headers: {
            Authorization: `${token}`, // 替换为真实Token
            // 无需手动设置Content-Type，FormData会自动处理
          },
          body: formData, // 或使用file（直接二进制），根据服务器要求选择
        })
          .then((response) => {
            if (!response.ok) {
              throw new Error(
                `上传失败：${response.status} ${response.statusText}`,
              );
            }
            return response.json();
          })
          .then((data) => {
            console.warn('上传成功', data.data);
            // 转换成base64
            ImageBasePrintApi(data.data.fileName).then((resl) => {
              console.warn('返回base64', resl);
              if (resl.data) {
                target.refresh(resl.data); // 将图片base64替换
              }
            });
            // 假设服务器返回{ url: "xxx" }，更新图片显示
            // if (data.data.url) {
            //   target.refresh(data.data.url); // 根据实际需求调用刷新方法
            // }
          })
          .catch((error) => {
            console.error('上传失败', error);
          });
      });
      input.remove();
    },
    // 自定义可选字体
    // 或者使用 hiprintTemplate.setFontList([])
    // 或元素中 options.fontList: []
    fontList: [
      { title: '微软雅黑', value: 'Microsoft YaHei' },
      { title: '黑体', value: 'STHeitiSC-Light' },
      { title: '思源黑体', value: 'SourceHanSans***-Normal' },
      { title: '王羲之书法体', value: '王羲之书法体' },
      { title: '宋体', value: 'SimSun' },
      { title: '华为楷体', value: 'STKaiti' },
      { title: 'cursive', value: 'cursive' },
    ],
    dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
    history: true, // 是否需要 撤销重做功能
    // onDataChanged: (type, json) => {
    //   // 模板发生改变回调
    //   console.warn('删除？？？', type); // 新增、移动、删除、修改(参数调整)、大小、旋转
    //   console.warn(json); // 返回 template
    // },
    // onUpdateError: (e) => {
    //   // 更新失败回调
    //   console.warn('更新', e);
    // },
  });
  // 设计器的容器
  hiprintTemplate.design('#hiprint-printTemplate');
  hiprintTemplate.update(modeldata);
};

<div class="bigbox">
  <!-- 设计器的 容器 -->
  <ElCard class="box-card" style="width: 250px">
    <div class="ep-draggable-item"></div>
  </ElCard>
  <ElCard class="box-card" style="flex: 1; padding-left: 10px">
    <div id="hiprint-printTemplate"></div>
  </ElCard>
  <ElCard class="box-card" style="width: 280px">
    <div id="PrintElementOptionSetting"></div>
  </ElCard>
</div>
<style lang="scss" scoped>
::v-deep .hiprint-printElement-type {
  padding: 0;
  list-style: none;
}

::v-deep .hiprint-printElement-type > li > .title {
  clear: both;
  display: block;
  padding: 4px 0;
  margin-bottom: 6px;
  font-weight: 600;
}

::v-deep .hiprint-printElement-type > li > ul {
  display: block;
  padding: 0;
  list-style: none;
}

::v-deep .hiprint-printElement-type > li > ul > li {
  float: left;
  display: block;
  width: 50%;
  max-width: 100px;
}

::v-deep .hiprint-printElement-type > li > ul > li > a {
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95%;
  max-width: 100px;
  height: 92px;
  padding: 12px 6px;
  margin-right: 5px;
  margin-bottom: 7px;
  margin-left: -1px;
  font-size: 16px;
  color: #b9a5a6;
  text-align: center;
  word-break: break-all;
  word-wrap: break-word;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 3px;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 15%);
}

::v-deep .hiprint-option-items > .hiprint-option-item {
  font-size: 14px;

  // .hiprint-option-item-field {
  //   div {
  //     width: 30% !important;
  //     // padding-right: 10px;
  //   }

  //   // .auto-submit {
  //   //   width: 70% !important;
  //   // }
  // }
}

// ::v-deep .hiprint-option-items > .hiprint-option-item-row {
//   .hiprint-option-item-field > input {
//     width: 100% !important;
//   }
// }

// // 默认图片
// /deep/ .hiprint-printElement-image-content {
//   img {
//     content: url('~@/assets/logo.png');
//   }
// }
.pagetop {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

.pagetop-right {
  display: flex;
  flex: 1;
  align-items: center;
  height: 100%;
}

.pagetop-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 100%;
}

.bigbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 40px);
}

.box-card {
  height: 100%;
  overflow-y: scroll;
}

.back-btn {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 12px;
  color: #6b7280;
  transition: all 0.2s;
}

.back-btn:hover {
  color: #374151;
  background: #f3f4f6;
}
</style>

功能写法

 hiprintTemplate.setPaper(value.width, value.height); //设置打印模版纸张大小

// 打印
const print = () => {
  hiprintTemplate.print(
    printData,//模版对应的数据，如果想同时打印多份就传数组
    {},
    {
      callback: () => {
        // waitShowPrinter.value = false;
      },
    },
  );
};

// 获取模版JSON
const saveJson = (e) => {
    const json = templateModel.value.getJson();
    let data = JSON.stringify(json, null, 0);
};

// 清空模板
const printClear = () => {
  console.warn('清空');
  hiprintTemplate.clear();
};

注意点：使用表格时，给表头添加名称需带上#加字段名，如：昵称#name 这样表格昵称列取name字段的数据
如果打印时表格没有表格线，则是样式文件没引入

providers.js代码

import { hiprint } from 'vue-plugin-hiprint';

// 自定义设计元素1
export const aProvider = function () {
  const addElementTypes = function (context) {
    context.removePrintElementTypes('aProviderModule');
    context.addPrintElementTypes('aProviderModule', [
      new hiprint.PrintElementTypeGroup('平台', [
        {
          tid: 'aProviderModule.header',
          title: '单据表头aaaaa',
          data: '单据表头',
          type: 'text',
          options: {
            testData: '单据表头',
            height: 17,
            fontSize: 16.5,
            field: 'headera',
            fontWeight: '700',
            textAlign: 'center',
            hideTitle: true,
          },
        },
        {
          tid: 'aProviderModule.type',
          title: '单据类型',
          data: '单据类型',
          type: 'text',
          options: {
            testData: '单据类型',
            height: 16,
            fontSize: 15,
            field: 'textType',
            fontWeight: '700',
            textAlign: 'center',
            hideTitle: true,
          },
        },
        {
          tid: 'aProviderModule.order',
          title: '订单编号',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'orderId',
            testData: 'XS888888888',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'aProviderModule.date',
          title: '业务日期',
          data: '2020-01-01',
          type: 'text',
          options: {
            field: 'date',
            testData: '2020-01-01',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'aProviderModule.barcode',
          title: '条形码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'barcode',
            testData: 'XS888888888',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textType: 'barcode', // 决定类型
          },
        },
        {
          tid: 'aProviderModule.qrcode',
          title: '二维码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'qrcode',
            testData: 'XS888888888',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textType: 'qrcode',
          },
        },
        {
          tid: 'aProviderModule.platform',
          title: '平台名称',
          data: '平台名称',
          type: 'text',
          options: {
            testData: '平台名称',
            height: 17,
            fontSize: 16.5,
            fontWeight: '700',
            textAlign: 'center',
            hideTitle: true,
          },
        },
        {
          tid: 'aProviderModule.logo',
          title: 'Logo',
          data: '/logo.ico',
          // data: 'https://unpkg.***/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
          type: 'image',
          options: {
            width: 99,
            right: 121.5,
            src: 'https://unpkg.***/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
            fit: '',
          },
        },
      ]),
      new hiprint.PrintElementTypeGroup('库管', [
        {
          tid: 'aProviderModule.creater',
          title: '制单人',
          data: '李四',
          type: 'text',
          options: {
            field: 'creater',
            testData: '李四',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'aProviderModule.printDate',
          title: '打印时间',
          data: '2022-01-01 09:00',
          type: 'text',
          options: {
            field: 'printDate',
            testData: '2022-01-01 09:00',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'aProviderModule.signer',
          title: '库管签字',
          data: '',
          type: 'text',
          options: {
            title: '库管签字：',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
      ]),
      new hiprint.PrintElementTypeGroup('表格/其他', [
        {
          tid: 'aProviderModule.table',
          title: '表格',
          type: 'table',
          options: {
            field: 'table',
            // 添加表格边框样式配置
            tableHeaderRepeat: 'first',
            tableFooterRepeat: 'last',
            tableBorder: 'border',
            tableHeaderStyle: 'border: 1px solid #000; background: #f5f5f5; font-weight: bold;',
            tableBodyStyle: 'border: 1px solid #000;',
            tableFooterStyle: 'border: 1px solid #000; background: #f9f9f9;',
            // fields: [
            //   { text: '名称', field: 'NAME' },
            //   { text: '数量', field: 'SL' },
            //   { text: '规格', field: 'GG' },
            //   { text: '条码', field: 'TM' },
            //   { text: '单价', field: 'DJ' },
            //   { text: '金额', field: 'JE' },
            //   { text: '备注', field: 'DETAIL' },
            // ],
          },
          editable: true,
          columnDisplayEditable: true, // 列显示是否能编辑
          columnDisplayIndexEditable: true, // 列顺序显示是否能编辑
          columnTitleEditable: true, // 列标题是否能编辑
          columnResizable: true, // 列宽是否能调整
          columnAlignEditable: true, // 列对齐是否调整
          isEnableEditField: true, // 编辑字段
          isEnableContextMenu: true, // 开启右键菜单 默认true
          isEnableInsertRow: true, // 插入行
          isEnableDeleteRow: true, // 删除行
          isEnableInsertColumn: true, // 插入列
          isEnableDeleteColumn: true, // 删除列
          isEnableMergeCell: true, // 合并单元格
          columns: [
            [
              {
                title: '',
                align: 'center',
                field: '',
                width: 50,
                style: 'border: 1px solid #000; padding: 4px; text-align: center;'
              },
              {
                title: '',
                align: 'center',
                field: '',
                width: 50,
                style: 'border: 1px solid #000; padding: 4px; text-align: center;'
              },
              // { title: '名称', align: 'center', field: 'NAME', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
              // { title: '数量', align: 'center', field: 'SL', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
              // { title: '条码', align: 'center', field: 'TM', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
              // { title: '规格', align: 'center', field: 'GG', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
              // { title: '单价', align: 'center', field: 'DJ', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
              // { title: '金额', align: 'center', field: 'JE', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
              // { title: '备注', align: 'center', field: 'DETAIL', width: 100, style: 'border: 1px solid #000; padding: 4px;' },
            ],
          ],
          // footerFormatter(options, rows, data) {
          //   if (data && data.totalCap) {
          //     return `<td style="padding:0 10px" colspan="100">${`应收金额大写: ${data.totalCap}`}</td>`;
          //   }
          //   return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>';
          // },
        },
        {
          tid: 'aProviderModule.customText',
          title: '文本',
          customText: '自定义文本',
          custom: true,
          type: 'text',
        },
        {
          tid: 'aProviderModule.longText',
          title: '长文本',
          type: 'longText',
          options: {
            field: 'test.longText',
            width: 200,
            testData: '长文本分页/不分页测试',
          },
        },
      ]),
      new hiprint.PrintElementTypeGroup('辅助', [
        {
          tid: 'aProviderModule.hline',
          title: '横线',
          type: 'hline',
        },
        {
          tid: 'aProviderModule.vline',
          title: '竖线',
          type: 'vline',
        },
        {
          tid: 'aProviderModule.rect',
          title: '矩形',
          type: 'rect',
        },
        {
          tid: 'aProviderModule.oval',
          title: '椭圆',
          type: 'oval',
        },
        {
          tid: 'aProviderModule.barcode',
          title: '条形码',
          type: 'barcode',
        },
        {
          tid: 'aProviderModule.qrcode',
          title: '二维码',
          type: 'qrcode',
        },
      ]),
    ]);
  };
  return {
    addElementTypes,
  };
};

// 自定义设计元素2
export const bProvider = function () {
  const addElementTypes = function (context) {
    context.removePrintElementTypes('bProviderModule');
    context.addPrintElementTypes('bProviderModule', [
      new hiprint.PrintElementTypeGroup('常规', [
        {
          tid: 'bProviderModule.header',
          title: '单据表头',
          data: '单据表头',
          type: 'text',
          options: {
            testData: '单据表头',
            height: 17,
            fontSize: 16.5,
            fontWeight: '700',
            textAlign: 'center',
            hideTitle: true,
          },
        },
        {
          tid: 'bProviderModule.type',
          title: '单据类型',
          data: '单据类型',
          type: 'text',
          options: {
            testData: '单据类型',
            height: 16,
            fontSize: 15,
            fontWeight: '700',
            textAlign: 'center',
            hideTitle: true,
          },
        },
        {
          tid: 'bProviderModule.order',
          title: '订单编号',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'orderId',
            testData: 'XS888888888',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'bProviderModule.date',
          title: '业务日期',
          data: '2020-01-01',
          type: 'text',
          options: {
            field: 'date',
            testData: '2020-01-01',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'bProviderModule.barcode',
          title: '条形码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'barcode',
            testData: 'XS888888888',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textType: 'barcode',
          },
        },
        {
          tid: 'bProviderModule.qrcode',
          title: '二维码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'qrcode',
            testData: 'XS888888888',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textType: 'qrcode',
          },
        },
        {
          tid: 'bProviderModule.platform',
          title: '平台名称',
          data: '平台名称',
          type: 'text',
          options: {
            testData: '平台名称',
            height: 17,
            fontSize: 16.5,
            fontWeight: '700',
            textAlign: 'center',
            hideTitle: true,
          },
        },
        {
          tid: 'bProviderModule.image',
          title: 'Logo',
          data: '',
          type: 'image',
        },
      ]),
      new hiprint.PrintElementTypeGroup('客户', [
        {
          tid: 'bProviderModule.khname',
          title: '客户名称',
          data: '高级客户',
          type: 'text',
          options: {
            field: 'name',
            testData: '高级客户',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
        {
          tid: 'bProviderModule.tel',
          title: '客户电话',
          data: '18888888888',
          type: 'text',
          options: {
            field: 'tel',
            testData: '18888888888',
            height: 16,
            fontSize: 6.75,
            fontWeight: '700',
            textAlign: 'left',
            textContentVerticalAlign: 'middle',
          },
        },
      ]),
      new hiprint.PrintElementTypeGroup('表格/其他', [
        {
          tid: 'bProviderModule.table',
          title: '订单数据',
          type: 'table',
          options: {
            field: 'table',
            fields: [
              { text: '名称', field: 'NAME' },
              { text: '数量', field: 'SL' },
              { text: '规格', field: 'GG' },
              { text: '条码', field: 'TM' },
              { text: '单价', field: 'DJ' },
              { text: '金额', field: 'JE' },
              { text: '备注', field: 'DETAIL' },
            ],
          },
          editable: true,
          columnDisplayEditable: true, // 列显示是否能编辑
          columnDisplayIndexEditable: true, // 列顺序显示是否能编辑
          columnTitleEditable: true, // 列标题是否能编辑
          columnResizable: true, // 列宽是否能调整
          columnAlignEditable: true, // 列对齐是否调整
          columns: [
            [
              { title: '名称', align: 'center', field: 'NAME', width: 100 },
              { title: '数量', align: 'center', field: 'SL', width: 100 },
              { title: '条码', align: 'center', field: 'TM', width: 100 },
              { title: '规格', align: 'center', field: 'GG', width: 100 },
              { title: '单价', align: 'center', field: 'DJ', width: 100 },
              { title: '金额', align: 'center', field: 'JE', width: 100 },
              { title: '备注', align: 'center', field: 'DETAIL', width: 100 },
            ],
          ],
          footerFormatter(options, rows, data) {
            if (data && data.totalCap) {
              return `<td style="padding:0 10px" colspan="100">${`应收金额大写: ${data.totalCap}`}</td>`;
            }
            return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>';
          },
        },
        {
          tid: 'bProviderModule.customText',
          title: '文本',
          customText: '自定义文本',
          custom: true,
          type: 'text',
        },
        {
          tid: 'bProviderModule.longText',
          title: '长文本',
          type: 'longText',
          options: {
            field: 'test.longText',
            width: 200,
            testData: '长文本分页/不分页测试',
          },
        },
      ]),
      new hiprint.PrintElementTypeGroup('辅助', [
        {
          tid: 'bProviderModule.hline',
          title: '横线',
          type: 'hline',
        },
        {
          tid: 'bProviderModule.vline',
          title: '竖线',
          type: 'vline',
        },
        {
          tid: 'bProviderModule.rect',
          title: '矩形',
          type: 'rect',
        },
        {
          tid: 'bProviderModule.oval',
          title: '椭圆',
          type: 'oval',
        },
      ]),
    ]);
  };
  return {
    addElementTypes,
  };
};

// type: 1供货商 2经销商
export default [
  {
    name: 'A设计',
    value: 'aProviderModule',
    type: 1,
    f: aProvider(),
  },
  {
    name: 'B设计',
    value: 'bProviderModule',
    type: 2,
    f: bProvider(),
  },
];

print-data.js代码

export default {
  totalCap: '壹佰元整',
  creater: '制单人的名称嗯哼',
  logo: 'https://unpkg.***/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
  logoTest:
    'https://portrait.gitee.***/uploads/avatars/user/1800/5400665_***Simple_1591166830.png!avatar60',
  barcode: 'XS888888888',
  qrcode: '0123456789',
  test: {
    a: '111',
    b: '222',
    longText:
      '浙江在线3月29日讯最近，\n一篇小学五年级学生写的作文引起了钱报记者的关注这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以',
  },
  testaaa: {
    a: {
      b: {
        c: {
          d: 'dddddddddddd',
        },
      },
    },
  },
  table_test: {
    a: [
      {
        NAME: '测试商品1111',
        SL: 2,
        GG: '1*24g',
        TM: '2O22010100110',
        DJ: '6.8',
        JE: '13.6',
      },
      {
        NAME: '测试商品2222',
        SL: 2,
        GG: '1*24g',
        TM: '2O22010100110',
        DJ: '6.8',
        JE: '13.6',
      },
      {
        NAME: '测试商品3333',
        SL: 2,
        GG: '1*24g',
        TM: '2O22010100110',
        DJ: '6.8',
        JE: '13.6',
      },
      {
        NAME: '测试商品4444',
        SL: 2,
        GG: '1*24g',
        TM: '2O22010100110',
        DJ: '6.8',
        JE: '13.6',
      },
      {
        NAME: '测试商品5555',
        SL: 2,
        GG: '1*24g',
        TM: '2O22010100110',
        DJ: '6.8',
        JE: '13.6',
      },
    ],
  },
  table: [
    {
      INDEX: '1',
      NAME: '测试商品1111111',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
    {
      INDEX: '2',
      NAME: '测试商品02',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
    {
      INDEX: '3',
      NAME: '测试商品03',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
    {
      INDEX: '4',
      NAME: '测试商品04',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
    {
      INDEX: '5',
      NAME: '测试商品05',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
    {
      INDEX: '6',
      NAME: '测试商品06',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
    {
      INDEX: '7',
      NAME: '测试商品07',
      SL: 2,
      GG: '1*24g',
      TM: '2O22010100110',
      DJ: '6.8',
      JE: '13.6',
    },
  ],
};

print-lock.css代码

@media print {
  body {
    margin: 0px;
    padding: 0px;
  }
}

@page {
  margin: 0;
}

.hiprint-printPaper * {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

.hiprint-printPaper *:focus {
  outline: -webkit-focus-ring-color auto 0px;
}

.hiprint-printPaper {
  position: relative;
  padding: 0 0 0 0;
  page-break-after: always;
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -moz-user-select: none; /* Firefox */
  user-select: none;
  overflow-x: hidden;
  overflow: hidden;
}

.hiprint-printPaper .hiprint-printPaper-content {
  position: relative;
}

/* 火狐浏览器打印 第一页过后 重叠问题 */
@-moz-document url-prefix() {
  .hiprint-printPaper .hiprint-printPaper-content {
    position: relative;
    margin-top: 20px;
    top: -20px
  }
}

.hiprint-printPaper.design {
  overflow: visible;
}


.hiprint-printTemplate .hiprint-printPanel {
  page-break-after: always;
}

.hiprint-printPaper, hiprint-printPanel {
  box-sizing: border-box;
  border: 0px;
}

.hiprint-printPanel .hiprint-printPaper:last-child {
  page-break-after: avoid;
}

.hiprint-printTemplate .hiprint-printPanel:last-child {
  page-break-after: avoid;
}

.hiprint-printPaper .hideheaderLi***arget {
  border-top: 0px dashed rgb(201, 190, 190) !important;
}

.hiprint-printPaper .hidefooterLi***arget {
  border-top: 0px dashed rgb(201, 190, 190) !important;
}

.hiprint-printPaper.design {
  border: 1px dashed rgba(170, 170, 170, 0.7);
}

.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
  overflow: hidden;
  box-sizing: border-box;
}

.design .resize-panel {
  box-sizing: border-box;
  border: 1px dotted;
}

.hiprint-printElement-text {
  background-color: transparent;
  background-repeat: repeat;
  padding: 0 0 0 0;
  border: 0.75pt none rgb(0, 0, 0);
  direction: ltr;
  font-family: 'SimSun';
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  padding-bottom: 0pt;
  padding-left: 0pt;
  padding-right: 0pt;
  padding-top: 0pt;
  text-align: left;
  text-decoration: none;
  line-height: 9.75pt;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
}

.design .hiprint-printElement-text-content {
  border: 1px dashed rgb(206, 188, 188);
  box-sizing: border-box;
}

.hiprint-printElement-longText {
  background-color: transparent;
  background-repeat: repeat;
  border: 0.75pt none rgb(0, 0, 0);
  direction: ltr;
  font-family: 'SimSun';
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  padding-bottom: 0pt;
  padding-left: 0pt;
  padding-right: 0pt;
  padding-top: 0pt;
  text-align: left;
  text-decoration: none;
  line-height: 9.75pt;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
  /*white-space: pre-wrap*/
}


.hiprint-printElement-table {
  background-color: transparent;
  background-repeat: repeat;
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  border-style: none;
  direction: ltr;
  font-family: 'SimSun';
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  padding-bottom: 0pt;
  padding-left: 0pt;
  padding-right: 0pt;
  padding-top: 0pt;
  text-align: left;
  text-decoration: none;
  padding: 0 0 0 0;
  box-sizing: border-box;
  line-height: 9.75pt;
}

.hiprint-printElement-table thead {
  background: #e8e8e8;
  font-weight: 700;
}

table.hiprint-printElement-tableTarget {
  width: 100%;
}

.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
  border-color: rgb(0, 0, 0);
  /*border-style: none;*/
  /*border: 1px solid rgb(0, 0, 0);*/
  font-weight: normal;
  direction: ltr;
  padding-bottom: 0pt;
  padding-left: 4pt;
  padding-right: 4pt;
  padding-top: 0pt;
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
  /*line-height: 9.75pt;
  font-size: 9pt;*/
}

.hiprint-printElement-tableTarget-border-all {
  border: 1px solid;
}
.hiprint-printElement-tableTarget-border-none {
  border: 0px solid;
}
.hiprint-printElement-tableTarget-border-lr {
  border-left: 1px solid;
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-left {
  border-left: 1px solid;
}
.hiprint-printElement-tableTarget-border-right {
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-tb {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.hiprint-printElement-tableTarget-border-top {
  border-top: 1px solid;
}
.hiprint-printElement-tableTarget-border-bottom {
  border-bottom: 1px solid;
}

.hiprint-printElement-tableTarget-border-td-none td {
  border: 0px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) {
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:not(last-child) {
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:last-child {
  border-left: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child {
  border-left: none;
}

/*.hiprint-printElement-tableTarget tr,*/
.hiprint-printElement-tableTarget td {
  height: 18pt;
}

.hiprint-printPaper .hiprint-paperNumber {
  font-size: 9pt;
}

.design .hiprint-printElement-table-handle {
  position: absolute;
  height: 21pt;
  width: 21pt;
  background: red;
  z-index: 1;
}

.hiprint-printPaper .hiprint-paperNumber-disabled {
  float: right !important;
  right: 0 !important;
  color: gainsboro !important;
}

.hiprint-printElement-vline, .hiprint-printElement-hline {
  border: 0px none rgb(0, 0, 0);

}

.hiprint-printElement-vline {
  border-left: 0.75pt solid #000;
  border-right: 0px none rgb(0, 0, 0) !important;
  border-bottom: 0px none rgb(0, 0, 0) !important;
  border-top: 0px none rgb(0, 0, 0) !important;
}

.hiprint-printElement-hline {
  border-top: 0.75pt solid #000;
  border-right: 0px none rgb(0, 0, 0) !important;
  border-bottom: 0px none rgb(0, 0, 0) !important;
  border-left: 0px none rgb(0, 0, 0) !important;
}

.hiprint-printElement-oval, .hiprint-printElement-rect {
  border: 0.75pt solid #000;
}

.hiprint-text-content-middle {
}

.hiprint-text-content-middle > div {
  display: grid;
  align-items: center;
}

.hiprint-text-content-bottom {
}

.hiprint-text-content-bottom > div {
  display: grid;
  align-items: flex-end;
}

.hiprint-text-content-wrap {
}

.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap {
  white-space: nowrap;
}

.hiprint-text-content-wrap .hiprint-text-content-wrap-clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*hi-grid-row */
.hi-grid-row {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
  box-sizing: border-box;
}

.hi-grid-row::after, .hi-grid-row::before {
  display: table;
  content: '';
  box-sizing: border-box;
}

.hi-grid-col {
  display: block;
  box-sizing: border-box;
  position: relative;
  float: left;
  flex: 0 0 auto;
}

.table-grid-row {
  margin-left: -0pt;
  margin-right: -0pt;
}

.tableGridColumnsGutterRow {
  padding-left: 0pt;
  padding-right: 0pt;
}

.hiprint-gridColumnsFooter {
  text-align: left;
  clear: both;
}