浅析vue3PDF插件不显示文字
背景是本人负责开发的医疗项目移动端公众号和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查看,选否后页面正常显示。
浅析vue3PDF插件不显示文字相关推荐
- html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
- 0005 前端 Html 04 AutoFileName 图片的显示 文字链接 图片链接 页面内链接 列表 加超链接的列表
以下为学习笔记,用来备忘.交流 工具:Sublime Text 3 渲染:谷歌浏览器 AutoFileName工具的安装 安装过程参见添加Emmet插件 参考我上面安装Emmet插件的过程,基本一样. ...
- unity | 竖排显示文字text
一.使用方案 竖排显示文字最方便的方法,是用TextMeshPro,是unity2018往后自带的一个插件. 二.下载方式 这里如果看不懂,建议直接搜索TextMeshPro的安装,下载,这样的词汇. ...
- html图片左侧现实文字,css 关于图片上显示文字
图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute. 本文带来了一种新的实现方式:采用height为0+overflow为visible的方式 ...
- 如何在ToolBar中显示文字和图标,自定义图标大小,并和MenuItem关联
要注意以下几个方面,先后顺序未必正确,有可能多设几次 1.设置ToolBar可以显示文字 ToolBar.ShowCaption := True; 2.设置ToolButton大小 ImageList ...
- WPF显示经常使用的几个显示文字控件TextBox, TextBlock, Lable
WPF显示经常使用的几个显示文字控件TextBox, TextBlock, Lable TextBox, TextBlock. Lable 当中TextBox 和Lable均继承了Control类 能 ...
- three.js 加载显示文字
three.js 加载显示文字 代码放到 ./three.js/examples/ 下 <!DOCTYPE html> <html lang="en">&l ...
- OpenCV在图像上画线、矩形、椭圆、多边形、填充的多边形、圆、显示文字
OpenCV在图像上随机画直线.椭圆.多边形.圆.显示文字 代码如下: /*** @file Drawing_2.cpp* @brief Simple sample code*/#include &l ...
- Windows 10小娜只显示文字而不发声怎么办?
Win10小娜只显示文字而不发声怎么办?Win10小娜是Win10系统独有的智能语音助手,可以进行对话什么的,可好用了.但最近有用户反馈说,和小娜对话,小娜只显示文字不发声了,这是怎么回事呢?为什么小 ...
最新文章
- 今天终于将第一个 Android NDK 程序编译、运行成功
- GM6 1.38.1 start up debug - share memory
- matlab msgbox 换行,[转载]Matlab/GUI笔记
- (ZT)在日本市场推广 iPhone 应用的经验
- 谁说技术男不浪漫!90后程序员2天做出猫咪情绪识别软件
- ios10前台收到推送_IOS - 前台时的推送弹窗效果
- 信息系统项目管理06——项目进度管理
- 在Jupyter Notebook中实现图像检测服务的调用
- C#中的==、Equal、ReferenceEqual
- Pico Neo3 4VR一体机破解版游戏资源合集安装包下载及安装教程分享
- C# 调用Webservice实例
- 《微观经济学新论》读书笔记
- “毕竟,你胜利了......敬胜利者一杯。”
- 根据先序和中序(中序和后序)确定二叉树
- 解决微信ios端+sendReq: not found
- EFR32上实现精确的软件延时
- 解决idea运行Tomcat项目时网页自动打开test1_Web_exploded文件并且打开其他链接时报错404的问题
- 4部网页配色电子书库之第4部——网站配色方案赏析
- 新形势下,我国医药企业营销管理遇到哪些挑战?
- Chipmunk-js物理引擎学习笔记
热门文章
- 中国移动将对SIM卡进行节能减排改造
- 面向对象常用魔法方法(内置方法)合集, 超级无敌宇宙详细
- 一个程序员的基本素质
- 华为3COM交换机配置
- 微信小程序函数无法运行或者出现报错“Component “页面路径“ does not have a method “ 方法名“ to handle event “tap“.”
- ( ̄ε(# ̄)☆╰╮( ̄▽ ̄///)
- 湖南科技职业学院计算机网络技术在哪个校区,湖南科技职业学院地址在哪里
- 最全的卫星影像分辨率和传感器参数汇总SPOT、IKONOS、QB、北京一号、ZY-1-02C
- 用C实现模拟cf(穿越火线)抽奖
- 2018智能社vue.js精讲视频教程