How to download a locally stored file in VueJS

Just an extension to the @Judd's answer. If you don't have a webpack.config.js, you can use the vue.config.js file. (just create it in the root, if it doesn't exist)

vue.config.js

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

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>

or this

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

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.

For anyone which doesnt want to use webpack, I solved this issue:

• create a folder called files in public
• I moved there the files I wanted to download and Voila, WORKED.

<a href="/files/book.pdf" download>DOWNLOAD</a>