javascript - 单击以打开 PDF - 您可能需要适当的加载程序来处理此文件类型
问题描述
我正在尝试将 PDF 导入 .js 文件,以便在Click to open pdf
我的渲染中加入。
输入
import myFile from './assets/files/myfile.pdf';
渲染
render() {
return (
...
<a href={myFile}>
<span>Click to open PDF</span>
</a>
...
)}
错误
myProject.bundle.js:88481 ./assets/files/myfile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
Webpack.config.js
我尝试了几个 PDF 加载器都没有成功,下面的 webpack 使用url-loader
.
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;
注意:如果这有什么不同,我会在 localhost 上进行测试。
解决方案
问题来自这样一个事实,即我npm run startdev
在进行一些更改后没有通过运行来重新启动开发服务器。
解决方案
将其包含在文件加载器中,就像处理图像一样:
{ test: /\.(jpg|png|gif|svg|pdf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },
请注意,我已|pdf
在 SVG 声明之后添加。然后,Webpack 应该像处理图像一样处理文件。
推荐阅读
- node.js - 每次我尝试将我的反应代码推送到 heroku 时,git push heroku main 都会失败
- opencv - 跟踪记住原始 ID 的对象
- .net - 在 .Net Core 中打开工作流 xaml 文件时出错
- python - 如何将与其计数器列值计数的列值外推到新的数据帧?
- python - Displot 整数之间的下降
- c - 如何将结构数组放置在 RAM 中的特定位置,例如 STM32F4 MCU 中的备份 RAM?
- apache-kafka - Prometheus - 计算百分比增加
- algorithm - 无法理解为什么这不是高度平衡的二叉搜索树
- android - android studio ( kotlin ) build.gradle 错误?
- c# - 通过坐标查找字符串的索引