效果图
设计模板是按照约定的读取数据规则进行设计
- 渲染数据+二维码
- 带多种样式的单元格+图片
实现思路
- 按照约定的规则,遍历替换单元格内容,sheet重新进行渲染
- 利用luckysheet自带的方法setRangeShow(),将存在数据、特殊格式的区域进行选中
- 利用luckysheet自带的方法getRangHtml()获取选中区域的html代码(只有表格html)
- 将以上html代码塞入提前设置好的html模板
- 利用node-qrcode生成二维码src字符串,替换html对应内容
- 利用printjs进行打印,可以使用html类型、raw-html类型进行打印
- 设置关闭打印弹窗后的回调函数:重新渲染模板
实现过程
数据渲染
- 设置数据匹配规则,类似于${data.fieldName}
- 遍历当前sheet的celldata,利用正则表达式进行规则匹配
- 根据匹配结果和渲染目标,生成新的celldata数组,数组项类似于{r: 0, c: 0, v: “”}(可能更复杂)
- 重新生成当前sheet的data,其中的data数组设置为[],那么在调用luckysheet.create()方法时,会使用celldata数据进行初始化
生成html代码
实现思路2~5点
遇到的问题点:
- getRangHtml()方法不能获取存在多种样式的单元格内容,这点可以修改源码去进行修复
- 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();
}
});