type
status
date
slug
summary
tags
category
icon
password
Edited
Nov 24, 2023 08:50 AM
Created
Nov 24, 2023 08:05 AM
记录
PDF预览的选型
对于浏览器自带的PDF预览
如果能直接使用，那自然最好不过了，但考虑多种因素，比如权限问题，禁止用户去下载PDF、预览样式不统一（不同浏览器PDF预览的实现不同），所有最终放弃了该方式
看了很多例子，大部分都是围绕
pdf.js这个库展开的，所以我的选项也是围绕它去找的最终找到几个不错的
pdfjs-dist
react-pdf
pdf-viewer
接下来我会依次介绍一下三个库的使用
pdfjs-dist
其实就是pdfjs库，只是对其进行打包发布到npm了
直接根据官方文档的案例对比进行操作就行了
这种实现比较繁琐，所以也就有了
react-pdf，对pdfjs-dist进行了一层封装效果展示
react-pdf
这种相对于原生pdfjs，简单了很多
但是，功能太少了，如果需要添加都要自己实现一遍，也很繁琐，所以还是用了pdfjs提供的viewer来实现这个效果的
这边的效果和pdfjs-dist呈现的是一样的
pdf-viewer
提示：使用的环境是 Vite + React
首先先根据自己的需求下载对应的build包
解压后，将其中的
build和web文件夹移入public中，也便后续能够直接在线上进行访问
这样就将 pdfjs 和 viewer 加载进来了，你可以启动项目到
/web/viewer.html 路径下访问，测试是否生效接下来，我们对其进行封装，我通过的方式是iframe去访问 viewer 来展示pdf的
注意：
因为文件路径是一个url链接，不能直接当作链接，需要对其特殊字符进行转义，不然 viewer 没办法识别到真正的url
接着，我们还要到viewer里去修改一下接收到的file字符串，进行还原
这样 viewer 才能真正接收到fileUrl
最终呈现
encodeURI 和 encodeURIComponent 的区别
encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
Viewer
再回到一开始的问题，我们需要禁用用户下载、打印等等功能，所以我们需要进入到 viewer 代码里进行删除对应的功能
首先在 viewer 中删除相关元素
viewer.html
viewer.mjs
删除无用文件
/web/locale
最终呈现
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/pdf-preview
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。