luckysheet渲染数据及二维码后进行打印

效果图

设计模板是按照约定的读取数据规则进行设计

1. 渲染数据+二维码
   
2. 带多种样式的单元格+图片
   

实现思路

1. 按照约定的规则，遍历替换单元格内容，sheet重新进行渲染
2. 利用luckysheet自带的方法setRangeShow()，将存在数据、特殊格式的区域进行选中
3. 利用luckysheet自带的方法getRangHtml()获取选中区域的html代码（只有表格html）
4. 将以上html代码塞入提前设置好的html模板
5. 利用node-qrcode生成二维码src字符串，替换html对应内容
6. 利用printjs进行打印，可以使用html类型、raw-html类型进行打印
7. 设置关闭打印弹窗后的回调函数：重新渲染模板

实现过程

数据渲染

1. 设置数据匹配规则，类似于${data.fieldName}
2. 遍历当前sheet的celldata，利用正则表达式进行规则匹配
3. 根据匹配结果和渲染目标，生成新的celldata数组，数组项类似于{r: 0, c: 0, v: “”}（可能更复杂）
4. 重新生成当前sheet的data，其中的data数组设置为[]，那么在调用luckysheet.create()方法时，会使用celldata数据进行初始化

生成html代码

实现思路2~5点

遇到的问题点：

1. getRangHtml()方法不能获取存在多种样式的单元格内容，这点可以修改源码去进行修复
2. create()，setRangeShow()，getRangHtml()，几个方法必须按顺序执行，否则渲染效果有误，这点可以利用luckysheet工作簿的钩子workbookCreateAfter和setRangeShow()的success回调函数进行控制

打印及回调

import printJS from 'print-js';

// 在打印预览页面点击取消后，需要手动触发，让页面重新聚焦，否则onPrintDialogClose无效
let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
printJS({
  printable: html.outerHTML, type: 'raw-html', onPrintDialogClose: () => {
    clearInterval(focuser);
    previewCb();
  }
});
1
2
3
4
5
6
7
8
9
10