vue.js - 下载带有href标记的文件使该文件难以辨认

我假设您正在使用Vue CLI。

Vue CLI生成的默认配置对图像进行特殊处理。为了使相同的东西适用于PDF，您需要自己进行配置。

首先，你需要明确地使用require你的href：

<a :href="require('../../assets/all-work/proto/pdf-test.pdf')" download>Download</a>

在某些情况下，例如srcan 的属性，自动<img>使用包装require。对于<a href>它不是。

然后，您将遇到Webpack加载器错误，因为Webpack不知道如何处理.pdf文件。

要解决此问题，您需要在中配置file-loaderin vue.config.js：

module.exports = {
  chainWebpack (config) {
    config.module.rule('pdf')
      .test(/\.pdf$/)
      .use('file-loader')
      .loader('file-loader')
  }
}

如果还没有vue.config.js文件，则需要创建一个文件。它位于您的旁边的顶层package.json。

如果您已经有了一个，vue.config.js那么您需要将chainWebpack属性与现有配置一起合并到其中。

默认情况下，文件将根据其内容重命名为哈希。您要保留原始文件名，可以配置该文件名：

chainWebpack (config) {
  config.module.rule('pdf')
    .test(/\.pdf$/)
    .use('file-loader')
    .loader('file-loader')
    .options({
      name: '[name].[ext]'
    })
}

有关该name选项的更多详细信息，请参见：

https://webpack.js.org/loaders/file-loader/#name