前端实现PDF预览的几种选择（pdfjs-dist、react-pdf、pdf-viewer） ...

记录
  PDF预览的选型

对于欣赏器自带的PDF预览

如果能直接使用，那自然最好不外了，但思量多种因素，比如权限问题，克制用户去下载PDF、预览样式不统一（不同欣赏器PDF预览的实现不同），所有最终放弃了该方式
看了很多例子，大部分都是围绕pdf.js这个库展开的，所以我的选项也是围绕它去找的
最终找到几个不错的

• pdfjs-dist
  
• react-pdf
  
• pdf-viewer
  

接下来我会依次介绍一下三个库的使用
pdfjs-dist

其实就是pdfjs库，只是对其进行打包发布到npm了
直接根据官方文档的案例对比进行操纵就行了
Examples

1. import { useEffect, useRef } from 'react'
2. import * as PDFJS from 'pdfjs-dist'
4. PDFJS.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`
6. interface Props {
7.   fileUrl: string
8. }
10. const FilePDF = ({ fileUrl }: Props) => {
11.   const pdfContainer = useRef<HTMLCanvasElement>(null)
12.   const pdfCtx = useRef<CanvasRenderingContext2D | null>(null)
13.   const pdfDoc = useRef<any>()
14.   const pdfNumPages = useRef(0)
16.         // 依次渲染所有页面
17.   const renderPage = num => {
18.     pdfDoc.current!.getPage(num).then(page => {
19.       const viewport = page.getViewport({ scale: 1 })
20.       pdfContainer.current!.width = viewport.width
21.       pdfContainer.current!.height = viewport.height
23.       page
24.         .render({
25.           viewport,
26.           canvasContext: pdfCtx.current!
27.         })
28.         .promise.then(() => {
29.           if (num < pdfNumPages.current) {
30.             renderPage(num + 1)
31.           }
32.         })
33.     })
34.   }
36.   useEffect(() => {
37.     pdfCtx.current = pdfContainer.current!.getContext('2d')
39.     PDFJS.getDocument(fileUrl).promise.then(pdfDoc_ => {
40.       pdfDoc.current = pdfDoc_
41.       pdfNumPages.current = pdfDoc_.numPages
42.       renderPage(1)
43.     })
44.   }, [])
46.   return (
47.     <div className={'flex h-full w-full items-center justify-center rounded-lg'}>
48.       <canvas ref={pdfContainer}></canvas>
49.     </div>
50.   )
51. }
53. export default FilePDF

复制代码

这种实现比较繁琐，所以也就有了react-pdf，对pdfjs-dist进行了一层封装
效果展示

react-pdf

这种相对于原生pdfjs，简单了很多

1. import { useRef, useState } from 'react'
2. import { Document, Page, pdfjs } from 'react-pdf'
3. import 'react-pdf/dist/Page/AnnotationLayer.css'
4. import 'react-pdf/dist/Page/TextLayer.css'
6. pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`
8. interface Props {
9.   fileUrl: string
10. }
12. const FilePDF = ({ fileUrl }: Props) => {
13.   const documentRef = useRef<HTMLDivElement>()
14.   const scale = useRef(1)
15.   const [pageNumber, setPageNumber] = useState<number>(1)
17.   const renderDocumentPage = (num: number, total: number) => {
18.     if (num <= total) {
19.       setPageNumber(num)
20.       requestIdleCallback(() => renderDocumentPage(num + 1, total))
21.     }
22.   }
24.   const onDocumentLoadSuccess = ({ numPages, ...rest }: { numPages: number }) => {
25.     requestIdleCallback(() => renderDocumentPage(1, numPages))
26.   }
28.   return (
29.     <div
30.       className={
31.         'flex h-full w-full justify-center overflow-auto rounded-lg bg-[#525659]'
32.       }
33.     >
34.       <Document
35.         ref={documentRef}
36.         file={fileUrl}
37.         onLoadSuccess={onDocumentLoadSuccess}
38.         loading="努力加载中..."
39.         renderMode="canvas"
40.       >
41.         {Array.from({ length: pageNumber }).map((_, i) => (
42.           <Page pageNumber={i + 1} className="mt-6" loading="努力加载中..." />
43.         ))}
44.       </Document>
45.     </div>
46.   )
47. }
49. export default FilePDF

复制代码

但是，功能太少了，如果需要添加都要本身实现一遍，也很繁琐，所以还是用了pdfjs提供的viewer来实现这个效果的
   这边的效果和pdfjs-dist出现的是一样的
  pdf-viewer

   提示：使用的环境是 Vite + React
  首先先根据本身的需求下载对应的build包
Getting Started
解压后，将此中的build和web文件夹移入public中，也便后续能够直接在线上进行访问

这样就将 pdfjs 和 viewer 加载进来了，你可以启动项目到 /web/viewer.html 路径下访问，测试是否生效
接下来，我们对其进行封装，我通过的方式是iframe去访问 viewer 来展示pdf的

1. interface Props {
2.   fileUrl: string
3. }
5. const FilePDF = ({ fileUrl }: Props) => {
6.   return (
7.     <div className={'h-full w-full overflow-hidden rounded-lg'}>
8.       <iframe
9.         className="border-0"
10.         title="预览文档"
11.         src={`/graphicPlatform/web/viewer.html?file=${encodeURIComponent(fileUrl)}`}
12.         width="100%"
13.         height="100%"
14.       ></iframe>
15.     </div>
16.   )
17. }
19. export default FilePDF

复制代码

注意：

因为文件路径是一个url链接，不能直接看成链接，需要对其特殊字符进行转义，不然 viewer 没办法识别到真正的url
接着，我们还要到viewer里去修改一下接收到的file字符串，进行还原

这样 viewer 才气真正接收到fileUrl
最终出现

encodeURI 和 encodeURIComponent 的区别

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

再回到一开始的问题，我们需要禁用用户下载、打印等等功能，所以我们需要进入到 viewer 代码里进行删除对应的功能
首先在 viewer 中删除相关元素
   viewer.html
  

   viewer.mjs
  

删除无用文件
   /web/locale
  

最终出现

参考链接

• 前端 pdf 在线预览 - 掘金 (juejin.cn)
  
• *https://blog.csdn.net/qq_40609533/article/details/106498334*
  
• PDF.js (mozilla.github.io)
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。