1. 分类
原生打印,window.print() 实现
插件实现,很多种,我这里选择的是 jquery.print.js
优缺点
原生打印的好处就不多说了,简单方便,全屏打印,如果对打印功能没有什么特殊要求可以直接使用即可;
使用插件的好处可以很方便的实现局部打印以及对各种功能的配置
项目需求
打印医院报告单,单子上的内容比较多,且会有 echarts 图表;在表单的地步会展示列表数据表示图表中标注点的信息。且要求该列表信息另起一页。
tips: 注意我标注出来的知识点,echarts 在 print 的打印预览中无法正常显示,是一片空白。至于指定位置分页,网上说的增加代码 style="page- break-before:awlays;" 或者是 style="page- break-after:awlays;"在指定位置分页都尝试过,之后的内容虽然没有在第一页显示但是预览时的节面总数仍然是一页(可能是我的用法有问题或者浏览器有问题,如果知道的小伙伴请告诉我,谢谢)
如何在成功打印出 echarts 表格数据
1.这个其实很好解决,大家搜一搜就能够知道,主要就是把 echarts 图表转换成图片,这里的一个注意点就是在打印完成或者取消打印的时候把生成的图片去除并删除图片
// html
// echarts 本身提供了把图表转换成图片的方法
let image = new Image();
let imgSrc = this.logChartDialog.getDataURL();
image.src