1027

工作

html2pdf 问题：

问题一：JSON 含有转义字符反序列化失败问题

// 方案一，让后端将序列化的数据替换掉下面的 "{{data}}"
const dataSource = "{{data}}"
// 这里需要前端对数据进行反序列化
const data = JSON.parse(dataSource)

// 方案二 直接使用 dataSource，格式为 { "name": value }，这种既是 json 格式又是 对象格式，不需要反序列化
const dataSource = "{{data}}"

方案一带来的问题：如果数据中含有转义字符，例如：\n, \t, \r 等

JSON.parse({"name":"hh\n"})
VM274:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at <anonymous>:1:6

解决方案就是，使用 JSON.parse(val, replacer, fn) 的第二个参数替换掉转义字符；

随后发现后端转成 json 的数据是 { "name": value } 这就可以直接当做对象使用，就不再需要使用反序列化了

问题描述二：pdf 模板打印空白问题

编写好 html 模板后，在本地启动和使用 mock 数据测试没有问题，但是到了 html2pdf 服务中进行转换就整个页面白屏，猜测问题：

js 语法有问题，解析失败；
js 数据边界考虑错误，代码报错；
js 代码没执行；

因为本地是最新的 chrome 浏览器，语法什么的都是兼容的；本地测试是没有问题的；但是服务器上打印服务的浏览器环境就不是了；

查看了服务器上打印服务依赖的浏览器环境是 Electron 2.x 版本功能，看了下，是 18年左右的旧版本，当前的 Electron 版本已经是 15.x 了，差别还是很大的，最大的影响就是一些新特性语法不支持；

我的做法：

写段 js 插入 dom 操作验证 js 是可以执行的， success；
拿到导致 pdf 白屏的数据，本地 mock 测试，确定是否是边界问题，success；
最后，确定是语法兼容性问题了，我的做法：
- 使用 babel 在线将代码转换成 es5，结果 fail，这种做法也不方便后期维护代码；
- 因为核心逻辑是依赖某一个 ts 文件的，因此 build 该 ts 文件，copy 其 build 完的 js 文件进行小部分修改， success；

整整一天时间，因为不方便调试，所有时间都在改代码，上传服务器，测试环境验证....循环往复；

一直到晚上9 点左右，才走到最后一步，解决这个 pdf 打印空白问题；

正准备下班了，结果发现，公司公共组开发的水印功能有问题：pdf 的第二页没有水印；

但是本地测试是好的呀，诶，头大.......明天再看吧~~~

反思

遇到问题了，才有成长和进步，老大最后解决问题了，看我的代码写的这么长，仔细梳理了一下，发现我的很多代码很多冗余的，以及业务和数据聚合耦合了，代码需要深度优化！！

也确实，有问题有指导才能进步~~~

1027 ​

工作 ​

反思 ​

1027

工作

反思