浅析vue3PDF插件不显示文字

7 篇文章 1 订阅
5 篇文章 0 订阅

背景是本人负责开发的医疗项目移动端公众号和pc端要展示医生开具的处方pdf文件,本地是可以展示,但测试环境出现了解析出来的pdf上的大部分文字不显示的情况

vue3能使用的关于pdf展示的插件比较少,网上对此bug的讨论也不多。

我查到pdfdist依赖包跟字体识别渲染有关,就换了几个版本希望能与当前vue版本兼容,但行不通,也考虑到可能是测试环境字体包版本有问题,但后面在pdf模板上加上解析出来的字的字体,也失败了。

PDF模板里填充的字段 和签名 和图片  在公众号打开 相当于浮在上面一层  

关于插件pdfh5

也可能是因为依赖包版本太低,pdfh5 两年没更新了,这插件是把pdf转成图片,在转的过程报了这个文字图层渲染问题,解决了很久也没成功

关于插件vue3-pdfjs

它是把pdf渲染成一个个标签,本地在识别文字的时候直接没识别到后来在模板上填写的表单信息。

其他调查结果如下图所示

我这项目后端返回的pdf有的能在插件正常打开,有的打开后文字显示不全,这种情况只能让后端去把那个PDF链接转成图片格式,后端不愿意做,只能像下面这样处理了

选择使用公众号项目已有pdf展示插件来解决此问题,但成效不佳,该插件只能识别图片式不可编辑非表单类型的pdf,在开发者工具本地看是正常展示电子处方笺pdf,但在手机上看-电子处方笺上本该存在的表单信息都没有显示,只剩下了模板和签章。

前端目前使用了各种插件均无法正常展示pdf,为了不影响用户后续查看电子处方笺。

我考虑了直接点击pdf链接,当做一个页面去跳,移动端是只有安卓手机有问题,因为苹果手机支持在微信浏览器内直接打开pdf,而安卓会弹出提示框让用户去浏览器下载查看。

个别pdf用插件会让上面的表单信息不显示,所以要用window.open打开新页面,移动端安卓用户只能去浏览器下载查看。

window.open(data.item.pdfurl, '_self');

            commonUtils.hideLoading();避免页面一直loading加载,调用的公共去除loading动画的方法

现状:
IOS端没问题,安卓点击后出现弹框询问是否跳转到浏览器打开

 选是后选择浏览器跳转,浏览器提示请下载该pdf查看,选否后页面正常显示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JianZhen✓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值