使用 react webpack 文件加载器提供静态 pdf [英] Serving static pdf with react webpack file loader

问题描述

我正在提供一些静态文件，如图像和字体，没有任何问题.当我尝试对 PDF 文件执行相同操作时，出现错误.

I'm serving up some static files like images and fonts, without any problem. When I try to do the same with a PDF file, I get an Error.

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

ERROR in ./src/views/default/components/Footer.js

c:Resurs eposFrontendsrcviewsdefaultcomponentsFooter.js5:17 错误解析导入模块中的错误 'src/includes/ANVANDARAVTAL_MITTKONTOR.pdf' 导入/默认

c:Resurs eposFrontendsrcviewsdefaultcomponentsFooter.js 5:17 error Parse errors in imported module 'src/includes/ANVANDARAVTAL_MITTKONTOR.pdf' import/default

✖ 1 个问题(1 个错误，0 个警告)

✖ 1 problem (1 error, 0 warnings)

./src/views/default/components/Footer.js 中的错误找不到模块:错误:无法解析 c:Resurs eposFrontendsrcviewsdefaultcomponents 中的模块application-loader"@ ./src/views/default/components/Footer.js 21:32-84

ERROR in ./src/views/default/components/Footer.js Module not found: Error: Cannot resolve module 'application-loader' in c:Resurs eposFrontendsrcviewsdefaultcomponents @ ./src/views/default/components/Footer.js 21:32-84

webpack 配置工作正常，所有 jsx、es6、css、静态文件的加载器......除了 PDF 的加载器配置.

The webpack config works fine, with all the loaders for jsx, es6, css, static files... except for the loader config for PDF.

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

我的另一个加载器配置，它的工作原理，对于 PDF 看起来几乎相同，并且工作......为什么(哭泣)！?例如:

My other loader config, that works, looks virtually the same for PDFs, AND WORKS... WHY (SOBBING)!? Ex:

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

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

The import of files into react component looks like this:

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

我尝试了很多配置，搜索错误，搜索可以解决问题的加载程序.除了通常的图像、css、js 之外，没有关于从 webpack/react 提供静态内容的内容.

I've tried so many configurations, googled the error, googled for loaders that could solve the problem. Nothing about serving static content from webpack/react, except the usual images, css, js.

我还尝试提供一个 txt 文件只是为了看看它是否有效.这也失败，并出现与 PDF 相同的错误.

I also tried serving a txt file just to see if it works. This also fails with the same error as the PDF.

为什么 webpack 在使用文件加载器时会尝试解析文件?

Why does webpack try to parse the files when using the file loader?

推荐答案

使用 webpack file-loader 模块在生产或开发过程中处理静态内容并成功使用 PDF.这是该过程的简化版本:

Use the webpack file-loader module to process static content during production or development and successfully use PDFs. Here is a simplified version of the process:

React 组件

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

in your component file first import pdf file like:

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

然后更改 href 属性:

and then change the href attribute:

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

Webpack 加载器

定义 webpack 规则如下:

define the webpack rule like:

{
  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]'
        }
      }
    ]
  }

这篇关于使用 react webpack 文件加载器提供静态 pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！