【vue-plugin-hiprint】常见问题汇总②

【vue-plugin-hiprint】系列文章已发布8篇啦🌈！ 本篇主要罗列各位小伙伴使用过程中的一些常见问题②。希望对你们有所帮助😄。

前言

续接上文【vue-plugin-hiprint】常见问题汇总①。希望这两篇文章，对使用此插件的码友们有所帮助，少踩一些坑。

能够愉快的集成打印功能😊。

16 模板的格式是什么？

对于一些熟悉前端的小伙伴来说，这显然不是个问题。这里还是对一些后端大佬，新手小白稍微阐述一下吧~

模板是支持多面板的，一个面板可以理解成就是一张 A4 纸。 多面板，就是设计多张纸的打印内容。 大致格式如下：

// 模板json对象, 这是个对象
var template = { 
  panels: [ // 面板数组
    { // 面板对象
      index: 0,
      name: "面板的名称",
      height: 100, // 面板的宽高 单位mm
      width: 100,
      paperHeader: 0, // 页眉线位置  单位pt
      paperFooter: 222, // 页脚线位置  单位pt
      printElements: [ // 实际打印元素存放的位置
        {
          options: {
            left: 24, // 距离面板 左边 距离 单位pt
            top: 24, // 距离面板 顶部 距离 单位pt
            height: 17, // 元素的宽高
            width: 120,
            testData: "测试数据", // 设计时的测试数据
            field: "name", // 打印/预览时填充传的打印数据的 name 的值
            title: "元素标题" // 相比下面的标题，这个可以修改
          },
          printElementType: {
            title: "元素标题", // 如果没有上面的标题，取这个
            type: "text" // 打印元素的类型
          }
        },
      ], 
    },
    { // 面板对象
      index: 1,
      name: "这是第二个面板",
      height: 100, // 面板的宽高 单位mm
      width: 100,
      paperHeader: 0, // 页眉线位置  单位pt
      paperFooter: 222, // 页脚线位置  单位pt
      printElements: [ // 实际打印元素存放的位置
        {
          options: {
            left: 24, // 距离面板 左边 距离 单位pt
            top: 24, // 距离面板 顶部 距离 单位pt
            height: 17, // 元素的宽高
            width: 120,
            testData: "测试数据 2", // 设计时的测试数据
            field: "name", // 打印/预览时填充传的打印数据的 name 的值
            title: "元素标题2" // 相比下面的标题，这个可以修改
          },
          printElementType: {
            title: "元素标题", // 如果没有上面的标题，取这个
            type: "text" // 打印元素的类型
          }
        },
      ], 
    }
    // ...更多面板
  ]
}

17 如何填充数据？

这里的填充数据，涉及 4 个 API。 主要就是通过元素的字段名(field)去填充传过去的数据。 API如下：

1. getHtml 获取预览的Html
2. print 浏览器打印
3. print2 通过客户端静默打印
4. toPdf 导出pdf文件

举个例子：

// ...已省略其他部分， 重要的就是这个 field
let template = {panels:[printElements:[{options:{field:'name'}}]]};
let hiprintTemplate = new hiprint.PrintTemplate({
  template: template
});
// 打印数据
let printData = {name:'这是打印的数据'}
// 填充数据, 并获取 html (jQuery对象)
let htmlObj = hiprintTemplate.getHtml(printData);
// 填充数据，并调用 浏览器打印
hiprintTemplate.print(printData);
// 填充数据，并通过 客户端静默打印
hiprintTemplate.print2(printData);
// 填充数据，并下载 导出的 pdf
hiprintTemplate.toPdf(printData);

17 没填充数据？不显示冒号(：)？

先上图：

详细描述一下：

• 标题(title)：
  • 当字段名(field)不存在，打印的结果是 标题(title)
  • 字段名(field)存在，打印的结果是 标题(title):填充字段名(field)的值
• 字段名(field)：
  • 用于4个API 填充数据
• 测试数据(testData)：
  • 拖拽设计时，当存在字段名(field), 显示结果是： 标题(title):测试数据(testData)的值

如上面描述，无论是测试数据(testData)，还是存在字段名(field)时，打印都会显示冒号(:)。

怎么隐藏？如下两张图：

仅仅需要，把隐藏标题(hideTitle)设置成隐藏(true)即可。

18 数字 0 没有打印的问题？

在JavaScript中 0 相当于 fasle。在填充数据的时候，判断了的打印数据的这个字段名(field)是否存在。所以无法填充 数字0。如下图：

所以，如果要显示0。我们需要换成字符串 '0'。当然这只是个处理方式。 如果你想修复这个问题，见源码：

顺带说一下， 字段名支持嵌套 如： a.b.c.d。

19 如何让字段名变成下拉选择？

字段名下拉有两种情况：

1. 整个模板，都是一个下拉列表
2. 单个元素，一个下拉列表

先说第一种整个模板设置。有两种方式设置，如下方代码：

// 1. 创建模板时指定
let hiprintTemplate = new hiprint.PrintTemplate({
  template: {},
  fields: [{"text":'姓名1',"field":'name'},{"text":'性别1',"field":'gender'}],
})
// 2. 模板对象调用setFields
hiprintTemplate.setFields([{"text":'姓名2',"field":'name'},{"text":'性别2',"field":'gender'}]);

然后是单个元素，我们可以配置在 provider 里面， 让拖拽出来，就有对应的下列列表。当然也可以通过hiprint.updateElementType，再次动态更新 provider的元素。

// 1. provider配置 (模板 json 对象也是一样,配置options的fields)
{
  tid: 'testModule.name',
  options: {
    fields: [{"text":'姓名1',"field":'name'},{"text":'性别1',"field":'gender'}]
  }
}
// 2. 动态更新
hiprint.updateElementType('testModule.name',(type) => {
  type.fields = {"text":'姓名1',"field":'name'},{"text":'性别1',"field":'gender'}];
  return type;
})

20 如何自定义字体？

首先明确一点：字体需要本机电脑，已安装对应字体才可以使用。

配置和设置字段名下列列表一样。都是可以整体设置，或者单个元素设置。 唯一不同的就是格式不一样。 上代码：

// 1. 创建模板时指定
let hiprintTemplate = new hiprint.PrintTemplate({
  template: {},
  fontList: [{"title":'微软雅黑',"value":'Microsoft YaHei'}],
})
// 2. 模板对象调用setFontList
hiprintTemplate.setFontList([{"title":'微软雅黑',"value":'Microsoft YaHei'}]);
// --- 元素单独设置 ---
{
  options: {
    fontList: [{"title":'微软雅黑',"value":'Microsoft YaHei'}]
  }
}

21 组装多个字段名作为值？

有时数据往往不仅仅是一个key，而是多个key拼接组合的结果。这种情况，有两种处理方式：

1. 元素设置为key, 手动处理需要填充的数据
2. 元素设置格式化函数

举个例子🌰：

1.手动处理的情况：

// 假设，这是后端返回的数据。
let printData = {key:'数据1',key2:'数据2',key3:'数据3'};
// 在调用打印之前，自己手动处理一下数据；
printData.key = printData.key = `${printData['key']}-${printData['key2']}-${printData['key3']}`;
hiprintTemplate.print(printData);

2.格式化函数（当然可以内置到provider中）：

// 参数依次为：标题，field的值，参数，模板打印数据，当前元素dom
function(title,value,options,templateData,target) {
  return `${templateData['name']}-${templateData['name']}`;
}
// 对应模板json 或者 provider中
{
  options:{
    "formatter": "function(title,value,options,templateData,target){\n  return `${templateData['name']}-${templateData['name']}`;\n}"
  }
}

效果如图：

22 样式参数不够用？

我在使用-参数篇有讲述如何嘛查看有哪些参数，以及如何自定义可选的参数。

如果觉得麻烦，那也可以使用 样式函数， 它主要返回一个对象， 使用jQuery可操作的样式对象，如下方代码：

// 参数依次为：field的值，参数，元素dom, 模板打印数据
function(value, options, target, templateData){
  return {'color':'red'};
}
// 对应模板json 或者 provider中
{
  options:{
    "styler": "function(value, options, target,templateData){\n  return {'color':'red'};\n}"
  }
}

23 如何每页都显示打印元素？

默认情况页面线之上的元素和页脚线之下的元素，会每页显示。 如果想打印每页的 密封线 之类的元素， 那就可以使用 位置固定 参数。

{
  options: {
    "fixed": true, // 元素位置固定， 每页显示
  }
}

24 如何在首尾页/奇偶页隐藏/显示打印元素？

这种情况，适用于想在末尾页/首页才打印一个logo/二维码之类的。 通过参数就可以搞定：

• showInPage 显示规则
  • none 始终隐藏
  • first 首页显示
  • odd 奇数页显示
  • even 偶数页显示
  • last 尾页显示
• unShowInPage 隐藏规则
  • first 首页隐藏
  • last 尾页隐藏

注意：这两个参数是会影响的，如果都设置成 last，那肯定是不会显示的。

{
  options: {
    "showInPage": "even", // 仅在偶数页显示
    "unShowInPage": "last" // 在尾页隐藏
  }
}

25 如何强制分页？

各种需求都用，使用的场景也很多😂！如果想在某个标题文本开始，另起一页开始打印。那么就需要用到pageBreak这个参数了。

{
  options: {
    // 从当前元素，开始另起一页打印
    "pageBreak": true, 
  }
}

注意：如果设置了位置固定fixed，这个强制分页pageBreak是无效的

总结

参数很多很多，各位在使用的时候，一定要多方面测试体验一下哟~

整体来说，这些问题，遇到过，以后基本就清楚了。

遇到问题不要怕，踩坑嘛。 多试试，下一次就是成功了。

用着用着就熟悉了。用着用着就...完事儿了。

敬请期待😄下一篇🚀

欢迎各位码友转发及留言反馈，觉得不错就点个赞再走咯~