Lazy loaded image
Web
🚈前端实现PDF预览的几种选择（pdfjs-dist、react-pdf、pdf-viewer）
字数 1021阅读时长≈ 3 分钟
2023-11-24
2024-12-18
type
status
date
slug
summary
tags
category
icon
password
Edited
Dec 18, 2024 02:44 PM
Created
Nov 24, 2023 08:05 AM
记录

PDF预览的选型

对于浏览器自带的PDF预览

如果能直接使用，那自然最好不过了，但考虑多种因素，比如权限问题，禁止用户去下载PDF、预览样式不统一（不同浏览器PDF预览的实现不同），所有最终放弃了该方式
看了很多例子，大部分都是围绕pdf.js这个库展开的，所以我的选项也是围绕它去找的
最终找到几个不错的
  • pdfjs-dist
  • react-pdf
  • pdf-viewer
接下来我会依次介绍一下三个库的使用
 

pdfjs-dist

其实就是pdfjs库，只是对其进行打包发布到npm了
直接根据官方文档的案例对比进行操作就行了
Examples
A general-purpose, web standards-based platform for parsing and rendering PDFs.
Examples
https://mozilla.github.io/pdf.js/examples/
这种实现比较繁琐，所以也就有了react-pdf，对pdfjs-dist进行了一层封装
 
效果展示
notion image
 
 

react-pdf

这种相对于原生pdfjs，简单了很多
但是，功能太少了，如果需要添加都要自己实现一遍，也很繁琐，所以还是用了pdfjs提供的viewer来实现这个效果的
 
这边的效果和pdfjs-dist呈现的是一样的
 

pdf-viewer

提示：使用的环境是 Vite + React
首先先根据自己的需求下载对应的build包
Getting Started
A general-purpose, web standards-based platform for parsing and rendering PDFs.
Getting Started
https://mozilla.github.io/pdf.js/getting_started/#download
解压后，将其中的build和web文件夹移入public中，也便后续能够直接在线上进行访问
notion image
这样就将 pdfjs 和 viewer 加载进来了，你可以启动项目到 /web/viewer.html 路径下访问，测试是否生效
接下来，我们对其进行封装，我通过的方式是iframe去访问 viewer 来展示pdf的
 
注意：
notion image
因为文件路径是一个url链接，不能直接当作链接，需要对其特殊字符进行转义，不然 viewer 没办法识别到真正的url
 
接着，我们还要到viewer里去修改一下接收到的file字符串，进行还原
notion image
这样 viewer 才能真正接收到fileUrl
 
最终呈现
notion image
 

encodeURI 和 encodeURIComponent 的区别

encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
 

Viewer

再回到一开始的问题，我们需要禁用用户下载、打印等等功能，所以我们需要进入到 viewer 代码里进行删除对应的功能
首先在 viewer 中删除相关元素
viewer.html
notion image
viewer.mjs
notion image
notion image
notion image
 
删除无用文件
/web/locale
notion image
 
最终呈现
notion image
 

参考链接

  1. 前端 pdf 在线预览 - 掘金 (juejin.cn)
  1. https://blog.csdn.net/qq_40609533/article/details/106498334
  1. PDF.js (mozilla.github.io)
 
上一篇
在 Monorepo 中对代码进行规范(husky + lint-staged)
下一篇
ECharts — 通过ColorPicker控制ECharts图表的渐变色
评论
Loading...
目录