首页 > 其他分享 >前端打印相关

前端打印相关

时间:2023-01-09 10:47:00浏览次数:34  
标签:vue 前端 打印 html printjs iframe 相关

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

  1. 下载引入printjs;写好 .vue文件
  2. 渲染后局部打印

项目总结:本次打印功能由预先的后端时间,转为前端实现,并且因为打印位置不一致,存在2,3两种打印方式;因为2需要html和替换过程,3需要.vue文件;在最快效率下(原先就有vue文件);将方式三也引入本次项目;
技术总结:局部打印还得是printjs,printjs需要把css写入当前打印元素行内(html也差不多),否则打印结果css不生效

标签:vue,前端,打印,html,printjs,iframe,相关
From: https://www.cnblogs.com/MrZhous/p/17036219.html

相关文章