1、方式一:后端提供打印文件,返回Blob格式数据,前端承接后直接转成对应文件即可
1) 前端直接调用后端接口,把blob文件转为url对象,拿到此对象后可以进行下载,打印和预览等操作
2) 下载
3) 打印
打印只需要将该url放入iframe后,拿到iframe的对象,调用print函数即可
4) 预览
直接window.open(url)
备注:由于该pdf比较花哨,后端java开发觉得太复杂,图片引入不进去(其实我认为应该可以引入的);此方法废弃;但在实际开发中请前端优先使用该方法,避免浏览器兼容问题
2、方式二:.html + iframe,进行数据替换,内部写好css;
1) 将html字符串文件引入,引入后手动修改内容,修改完毕后填入iframe,进行打印
3、 方式三:.vue + printjs
- 下载引入printjs;写好 .vue文件
- 渲染后局部打印
项目总结:本次打印功能由预先的后端时间,转为前端实现,并且因为打印位置不一致,存在2,3两种打印方式;因为2需要html和替换过程,3需要.vue文件;在最快效率下(原先就有vue文件);将方式三也引入本次项目;
技术总结:局部打印还得是printjs,printjs需要把css写入当前打印元素行内(html也差不多),否则打印结果css不生效