React中进行PDF预览(PDF预览文字消失问题)

在React中,PC端推荐使用浏览器自带的``标签进行PDF预览,而H5端因字体文件问题可能导致直接预览变为下载。解决方法包括使用React-PDF插件,注意字体文件支持,或在H5端通过后端返回图片来预览PDF,以提高兼容性和稳定性。 摘要由CSDN通过智能技术生成

一,PC

1.在 pc 端浏览器中,最好用的方法是使用浏览器自带的 <a /> 标签进行预览:

  • 直接通过 a 标签进行预览
// a标签属性会连接到队形的 url 地址,所以如果url是一个以.PDF结尾的链接,浏览器会直接在浏览器打开
// type属性规定被链接文档的的 MIME 类型相对性的类型文件会在浏览器打开
<a href="https://pdfobject.com/pdf/sample-3pp.pdf" type='application/pdf'>PDF</a>
  • 通过动态创建 a 标签进行预览
// 这种情况适用于文件流PDF预览
// 通过文件流创建 url
const url = window.URL.createObjectURL(new Blob([file],{
   type:'application/pdf'}))
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值