因前一份工作需求需要在浏览器中打印票据,尝试了各种插件和收费软件最后都被老大否决了(实际就是不想花钱)所以就使用浏览器原生打印实现了一个局部打印/模板打印的功能(因老大发话,后端施压,前端背锅导致)
- 该模板是在网上随便找的,体验打印效果
局部打印
- 之前gpt还没有出来,现在问了一下(我还不知道可以这样操作)
选择内容然后右键点击选择打印就行,这种方式最简单但是有很多的局限性,无法打印图表内容还有可能丢失样式,后来在github找到类似功能的库看了下源码发现在iframe中调用打印只会打印iframe里面的内容所以果断采用这种方式来实现。
模板打印
- 一开始我找到了一个叫Lodop的打印控件来解决需求,虽然有点丑但又不是不能用☺️后来被否决了原因是太麻烦了还要安装控件虽然还有更重要的原因。
因为要打印模板内容数据还要是动态的,刚好我的项目是使用vue开发的,自己用vue组件写一个模板出来也很简单然后在需要打印的时候将组件渲染再丢到iframe中进行打印就行了。
看起来没啥问题但是如果不打印的话这些模板完全就是多余的东西(垃圾代码)而且打印模板多了以后还增大了项目体积。
异步模板打印
这时候我就想到了defineAsyncComponent这个API异步组件,它在运行时是懒加载的,只在需要的时候才会加载,难点就在怎么知道模板下载完成并渲染完毕了才能开始打印,这时候就需要用到Suspense组件了就此完美解决。
用了几次后我就在想每次都要在组件当中写一些样板代码Suspense组件包裹模板组件好麻烦,所以我就写了一个Hook来实现一键打印,实现看Github