Javascript 如何使用webpack在angular应用程序中动态加载资源（pdf）？

我正在尝试使用带有

数据
属性的HTML
标记，将pdf加载到运行在
网页开发服务器上的angular应用程序中

因为pdf路径是在运行时生成的，并且是绝对的，类似于C:\test.pdf

它不会加载到UI中，而是
控制台
记录错误-

不允许加载本地资源：file:///C:/test.jpeg

然而，该应用程序的生产版本并不在托管服务器上运行，而是作为静态html运行。此外，相对路径也可以很好地工作

如何加载pdf

webpack.common.js


var webpack=require（'webpack'）；
var HtmlWebpackPlugin=require（'html-webpack-plugin'）；
var ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
const path=require（'path'）；
const rootDir=path.resolve（_dirname，…）；
module.exports={
决心：{
扩展名：['.js'，'.ts']，
模块：[rootDir，path.join（rootDir，node_模块”）]
},
模块：{
规则：[
{
测试：/\.html$/,，
加载器：“html加载器”
},
{
测试：/\（png | jpe？g | gif | svg | woff | woff2 | ttf | eot | ico）$/，
加载器：“文件加载器？名称=assets/[name].[ext]”
},
{
测试：/\（scss | css）$/，
使用：[
{loader:“样式加载器”}，
{loader:“css loader”}，
{加载程序：“sass加载程序”，
选项：{
IncludePath:[“节点\模块/”]
}
}
]
}
]},
插件：[
新建webpack.optimize.commonChunkPlugin({
名称：[“应用程序”、“供应商”、“polyfills”]
}),
新HtmlWebpackPlugin({
模板：“src/index.html”
}),
新建webpack.ContextReplacementPlugin(
/角度（\\\\/）核心（\\\\/）@angular/，
解析（_dirname，'../src'））
)
]
};您可以告诉devServer从哪里提供文件

devServer: {
  historyApiFallback: true,
  stats: 'minimal',
  contentBase: ['./dist', 'C:\\']
}

然后您可以使用

但我不建议将C:\添加为contentBase。如果有可能，请为生成的PDF定义另一个输出目录
 你能给出你的网页包配置文件的一个片段吗？请告诉资产文件夹中生成pdf的位置。@PraveshKhatri我已经添加了代码片段。我想你需要在webpack.common.js的文件加载器中添加
.pdf
扩展名，因为它会将你的文件放入资产文件夹。你有另一种方法，你可以通过
copyWebpackPlugin
@PraveshKhatri将你的pdf复制到资产中的目标文件夹中。我已经尝试过了，它不起作用。可能是因为此资产直到运行时才为网页包所知。谢谢！成功了。但是你为什么不推荐使用它呢？很好。因为它允许您包含C驱动器中的每个文件。Ok。但对于当前的用例来说，这并不是一个问题。谢谢你！