如何在 VueJS 中下载本地存储的文件

我有一个上传系统，我正在尝试为用户提供一个示例模板。我有一个本地存储在资产子文件夹中的模板，我想在我的 VueJS 组件中访问它并在页面上显示指向它的链接。这些是文件结构的应用部分：

 ├──app
│  └──Components
│     └──Uploader.vue
└──assets
   └──files
      └──Template_Upload.csv

在 Uploader.vue 我有这一行：

 <a v-bind:href="item.loc" download>{{item.title}}</a>

在出口我有这条线

data() {
  return {
    item: {title: 'Upload Template', loc: require('../../assets/files/Template_Upload.csv')}
}

如果我有图像，此方法有效。单击链接后，它会下载图像。但是，如果我使用 .csv 或 .xlsx 文件，打开页面时会引发错误。我试过使用

import fileTemplate from "../../assets/files/FileTemplate.csv";

同样，使用 fileTemplate 作为 loc 属性。如果我使用图片，这也有效。但我无法带入文件。这是我无法克服的限制，还是我可以尝试其他方法？

我还进入了 Visual Studio（换句话说，.csproj 文件），并将 Template_Upload.csv 构建操作 设置设置为“内容”，并将 复制到输出目录 设置设置为“始终复制”。

这些是我迄今为止主要使用的资源：

如何在 Vue 单文件组件中导入和使用图片？

Visual Studio 项目属性中的各种“构建操作”设置是什么？它们的作用是什么？

原文由 Judd 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k

感谢 OverCoder，解决方案确实是添加一个 CSV 加载器，以便将本地存储的文件添加到 webpack 服务器。对于其他使用 webpack 的人，我将此模块添加到我的 webpack.config.js 文件中：

 {
    test: /\.(csv|xlsx|xls)$/,
    loader: 'file-loader',
    options: {
        name: `files/[name].[ext]`
    }
}

然后我可以像这样在我的模板中轻松引用该文件，

 <a href="/files/Template_Upload.csv" download>File Template</a>

或这个

<a :href="item.loc" download>File Template</a>

使用与我说的相同的数据返回。在项目构建时，将 require 语句与加载器一起使用会将“必需”文件放入 wwwroot/files 文件夹。再次感谢 OverCoder，这为我节省了很多时间。

原文由 Judd 发布，翻译遵循 CC BY-SA 4.0 许可协议