【vue-pdf导致浏览器界面字体及内容缺失问题】

vue-pdf导致浏览器界面字体及内容缺失问题

一、问题描述

前阶段工作中遇到了一些生产问题,前端页面上的字体、图片、图标会随机缺失,特别是字体,一个完整的字符串会随机缺失中间两三个字(大无语事件),出现问题的页面也是随机的,首先排除了页面数据获取、传递的原因,而且在不同机具上出现问题的界面也不同。尝试了升级浏览器、清理缓存,也都无法解决。
后来经过测试发现此现象多发生于调用了vue-pdf插件后,网上资料大部分都是关于vue-pdf导致pdf显示界面内容缺失问题,但推测vue-pdf组件可能存在缺陷,会导致此类问题,尝试更换为vue-pdf-signature组件,依然无法解决(···)

二、解决方式

无奈放弃vue-pdf系列组件的使用,尝试使用canvas画布渲染方式显示pdf文件。

三、canvas渲染pdf

1、前端调用

直接上代码
请添加图片描述

2、js部分

下载pdf文件

请添加图片描述
支持base64格式

页面渲染

请添加图片描述

请添加图片描述

滑动加载处理

在滑动至当前页底部时再调用加载下一页的方法,提高页面渲染性能,减少不必要的开销。请添加图片描述

请添加图片描述

资源销毁

请添加图片描述

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue-pdf出现PDF格式错乱的问题可能有以下几个原因: 1. PDF文件本身存在格式问题:在生成PDF文件的过程中,可能存在一些格式错误或者不规范的问题。这可能导致Vue-pdf无法正确解析和显示PDF文件。 2. Vue-pdf不支持的PDF特性:Vue-pdf可能不支持某些PDF文件中的特定特性或者是高级的格式设置。这些特性可能导致Vue-pdf无法正确渲染PDF文件。 3. Vue-pdf版本或配置问题:如果你正在使用Vue-pdf的旧版本,或者有某些错误的配置,可能会导致PDF格式错乱的问题。在这种情况下,你可以尝试升级Vue-pdf的版本或者检查配置是否正确。 解决这个问题的方法包括: 1. 确保PDF文件本身没有问题:可以尝试使用其他PDF阅读器打开相同的PDF文件,观察是否存在格式错误或者显示异常的问题。 2. 检查Vue-pdf的兼容性和文档:查看Vue-pdf的官方文档,了解其对PDF格式和特性的支持情况。如果你的PDF文件中包含不被支持的特性,可以考虑改变PDF文件的生成方法,或者尝试其他的PDF渲染库。 3. 更新Vue-pdf的版本或者配置:如果你使用的是旧版本的Vue-pdf,尝试升级到最新版本,并确保所有的配置都正确设置。检查Vue-pdf的文档和社区论坛,看看是否有其他用户遇到过类似的问题,并找到解决方案。 总之,解决Vue-pdf出现PDF格式错乱的问题需要仔细检查PDF文件本身和Vue-pdf的配置,并根据具体情况采取相应的解决方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值