Javascript 单击打开PDF-您可能需要适当的加载程序来处理此文件类型

我正在尝试将PDF导入到.js文件中，以便在渲染中单击

打开PDF

导入

import myFile from './assets/files/myfile.pdf';

  render() {
return (
      ...
            <a href={myFile}>
              <span>Click to open PDF</span>
            </a>
      ...
)}

渲染

import myFile from './assets/files/myfile.pdf';

  render() {
return (
      ...
            <a href={myFile}>
              <span>Click to open PDF</span>
            </a>
      ...
)}

Webpack.config.js

我尝试了几个PDF加载程序，但没有成功，下面的网页使用了

url加载程序

const path = require('path'),
      webpack = require('webpack'),
      CleanWebpackPlugin = require('clean-webpack-plugin'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' });

const config = {
   mode: 'production',

  // absolute path for project root with the 'src' folder
  context: path.resolve(__dirname, 'src'),
  entry: ['babel-polyfill', './main.js'],
  // entry: {
  //   // relative path declaration
  //   app: './main.js'
  // },

  output: {
    // absolute path declaration
    path: path.resolve(__dirname, 'dist'),
    filename: 'myProject.bundle.js',
    publicPath: '/'
  },

  module: {
    rules: [
      // ************
      // * SEE HERE * 
      // ************
      { test: /\.pdf$/, use: 'url-loader' },
      // babel-loader with 'env' preset
      { test: /\.jsx?$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env', 'es2015', 'react', 'stage-0'] } } },
      // html-loader
      { test: /\.html$/, use: ['html-loader'] },
      // sass-loader with sourceMap activated
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ],
          fallback: 'style-loader'
        })
      },
      // file-loader(for images)
      { test: /\.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },
      // file-loader(for fonts)
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] },
    ]
  },

  plugins: [
    // cleaning up only 'dist' folder
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // extract-text-webpack-plugin instance
    extractPlugin
  ],

};

module.exports = config;

注意：如果这有什么不同，我正在本地主机上测试

解决方案

---

问题来自这样一个事实：在进行一些更改后，我没有通过运行npm run startdev重新启动dev服务器。

将其包括在文件加载程序中，就像处理图像一样：

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

---

注意，我在SVG声明之后添加了

| pdf

。然后，Webpack应该像处理图像一样处理文件。

您尝试过文件加载器吗？我删除了

{test:/\.pdf$/，使用：'url loader'}

并将

|pdf

添加到现有的文件加载器中：仍然收到相同的错误。注意：如果这有什么不同，我正在本地主机上测试它。它可能与位置有关-您可以将PDF移动到

src

文件夹中查看加载程序是否工作吗？我将PDF放在

src

文件夹中，像这样导入

import myFile from./myFile.PDF'，但仍然得到相同的错误。