vue 本地xlsx文件下载_如何在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

In Uploader.vue I have this line:

{{item.title}}

And in the export I have this line

data() {

return {

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

}

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";

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?

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:

解决方案

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,

File Template

or this

File Template

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.