使用react webpack文件加载器提供静态pdf

Serving static pdf with react webpack file loader

本文关键字：静态 pdf 加载 react webpack 文件 使用      更新时间：2023-09-26

我正在提供一些静态文件，如图像和字体，没有任何问题。当我尝试对PDF文件执行同样的操作时，我会收到一个错误。

中的错误/src/views/default/components/Footer.js

c： ''Resurs''repos''Frontend''src''views''default''components''Footer.js5:17 error分析导入模块"src/includes/ANVANDARAVTAL_MITTKONTOR.pdf"导入/默认中的错误

✖1个问题（1个错误，0个警告）

中的错误/src/views/default/components/Footer.js找不到模块：错误：无法解析c:''Resurs''repos''Frontend''src''views''default''components中的模块"应用程序加载程序"@/src/views/default/components/Footer.js 21:32-84

webpack配置运行良好，可以使用jsx、es6、css、静态文件的所有加载程序。。。除了PDF的加载程序配置。

{
    test: /'.pdf('?v=[0-9]'.[0-9]'.[0-9])?$/,
    loader: 'file-loader?minetype=application/pdf&name=[name].pdf'
}

我的另一个加载程序配置是有效的，对于PDF来说几乎是一样的，而且有效。。。为什么（哭泣）！？例如：

{
    test: /'.(ttf|eot|svg)('?v=[0-9]'.[0-9]'.[0-9])?$/,
    loader: 'file-loader'
}

将文件导入react组件如下所示：

import bg from "src/design/images/loginBG.jpg"; //works fine
import pdf from "src/includes/ANVANDARAVTAL_MITTKONTOR.pdf"; //NOT WORKING!

我已经尝试了很多配置，在谷歌上搜索了错误，搜索了可以解决问题的加载程序。除了常见的图像、css、js之外，没有任何关于从webpack/rect提供静态内容的内容。

我还试着提供一个txt文件，看看它是否有效。此操作也会失败，并出现与PDF相同的错误。

为什么webpack在使用文件加载程序时会尝试解析文件？

使用webpack文件加载器模块在生产或开发过程中处理静态内容，并成功使用PDF。以下是流程的简化版本：

反应组件

在您的组件文件中，首先导入pdf文件，如：

import PdfFile from '../../src/file.pdf'

然后更改href属性：

<a href={PdfFile} target='_blank' >
    <p>Click to open PDF file in a new tab</p>
</a>

Webpack加载程序

定义webpack规则，如：

{
  test: /'.(pdf|gif|png|jpe?g|svg)$/,
  use: 'file-loader?name=[path][name].[ext]',
  include: paths
}

或

{
    test: /'.(png|svg|jpg|gif|pdf)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }

这只是一个提醒，请退出webpack（powershell中的Ctrl+C），然后重新启动它，以使配置生效。

相关文章：