如何在VueJS中下载本地存储的文件 [英] How to download a locally stored file in VueJS

问题描述

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

I have an upload system and I am trying to supply a sample template for users. I have a template stored locally in a subfolder in assets, I would like to access that in my VueJS component and display a link to it on the page. These are the applicaple parts of the file structure:

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

在Uploader.vue中，我有这行:

In Uploader.vue I have this line:

<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文件，则在打开页面时会引发错误.我尝试使用

This method works if I have an image. Upon clicking on the link, it downloads the image. However, if I use a .csv or a .xlsx file, errors are thrown upon opening the page. I've tried using

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

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

As well, and using fileTemplate as the loc property. This also works if I use a picture. But I'm not able to bring in a document. Is this a limitation I can't get past or is there a different method I can try?

我也进入了Visual Studio(换句话说就是.csproj文件)，并将Template_Upload.csv的 Build Action 设置设置为"Content".并将复制到Ouput目录设置设置为始终复制".

I've also gone into Visual Studio (in other words, the .csproj file), and set the Template_Upload.csv Build Action setting is set to "Content" and the Copy to Ouput Directory setting is set to "Copy Always".

这些是我到目前为止主要使用的资源:

These are the resources I have primarily used thus far:

如何导入和使用图像在Vue单个文件组件中?

什么是";建立行动" Visual Studio项目属性中的设置，它们是做什么的?

推荐答案

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

Thanks OverCoder, the solution was indeed to add a CSV Loader in order that adds the locally stored files to the webpack server. For anyone else using webpack, I added this module to my webpack.config.js file:

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

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

Then I could reference the file easily like this in my template,

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

或这个

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

使用与我说的相同的数据返回.在项目生成时，将Required语句与加载程序一起使用会将必需"文件放入wwwroot/files文件夹中.再次感谢OverCoder，这为我节省了很多时间.

using the same data return as I said. Using the require statement with the loader puts the "required" files into the wwwroot/files folder when the project builds. Thanks again, OverCoder, this saved me a lot of time.

这篇关于如何在VueJS中下载本地存储的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！