React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能

本文完整版：《React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能》

在 React 项目中，很多场景都需要 PDF 文件预览功能，比如合同 ERP，销售CRM，内部文档 CMS 管理系统，都需要内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 React 项目中，实现 PDF 文件预览的所有常见功能。

跟随本教程学习完成后，你会搭出以下 PDF 在线预览效果的 React PDF 预览组件

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

本次教程中使用的技术栈

• Vite
• React
• Typescript
• pdf.js

快速搭建项目

> yarn create vite pdf-preview --template react-ts

现在我们安装下 pdf.js

通过官网的介绍，并没有发现 npm 的下载方式，这时候很多人估计就会直接安装 umd 版本的了，其实使用一个库除了看文档，看官方案例也是非常重要的，通过源代码下的 examples/webpack/main.js 文件，我们看到 pdfjs-dist 这个npm包，我们来下载

然后按照自己的习惯组织下文件目录

.
├── components
│   └── PDFRender
│       └── index.tsx
├── main.tsx
├── App.tsx
└── vite-env.d.ts

推荐阅读《5种 开源 react 移动端 ui 组件库测评推荐》

渲染第一页 - React 开发预览组件

这里我新建了一个 PDFRender 组件，先来实现一个最简单的，将 PDF 的第一页渲染出来

import * as pdf from 'pdfjs-dist'
import pdfWorker from 'pdfjs-dist/build/pdf.worker.js?url'
import React, { useLayoutEffect, useRef } from "react";

pdf.GlobalWorkerOptions.workerSrc = pdfWorker;

export const PDFRender: React.FC<{ src: string }> = (props) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  useLayoutEffect(() => {
    pdf
    .getDocument(props.src)
    .promise
    .then(pdfDocument => {
      return pdfDocument.getPage(1);
    })
    .then((pdfPage) => {
      const viewport = pdfPage.getViewport({ scale: 1.0 });
      const canvas