如何在Create React App中本地动态导入public/assets下的PDF文件

• 直接用静态资源路径引用，别用import
  create-react-app的public目录是静态资源根目录，webpack不会把这里的文件打包进模块，所以import肯定找不到。直接用**绝对路径（开发环境）或相对路径（本地直接打开build文件时）**就行：

开发环境（npm start运行） #

不管是用PDF组件还是a标签，直接用/assets/file.pdf：

用react-pdf展示的例子 #

先装依赖：

npm install @react-pdf/renderer

组件代码：

import { Document, Page } from '@react-pdf/renderer';

export default function ShowPDF() {
  return (
    <div style={{ width: '100%', height: '80vh' }}>
      <Document file="/assets/file.pdf">
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

直接打开/下载的a标签例子 #

<a href="/assets/file.pdf" target="_blank" rel="noopener noreferrer">
  查看PDF文件
</a>

本地直接打开build后的文件（不用服务器） #

这时候本地文件系统的根不是web服务器的根，要把路径改成相对路径./assets/file.pdf，可以加个环境判断适配两种场景：

const pdfUrl = process.env.NODE_ENV === 'production' ? './assets/file.pdf' : '/assets/file.pdf';

// 用pdfUrl作为文件路径
<a href={pdfUrl} target="_blank">打开PDF</a>

常见坑点 #

1. 别把PDF放进src目录，保持在public/assets下即可
2. 路径别写错：public下的assets直接对应/assets（开发）或./assets（本地打开build），不用加public前缀
3. 本地打开build文件时，确保index.html和assets文件夹在同一层级（create-react-app build后默认就是这样的）

内容的提问来源于stack exchange，提问作者Zanni-y