How To Download A Locally Stored File In 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 co

Solution 1:

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>

Solution 2:

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,

<ahref="/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.

Solution 3:

This works for me;

<ahref="../../assets/files/FileTemplate.csv"download>Download</a>

It behaves nicely even in dialogs.

Solution 4:

Try this:

<ahref="../../assets/files/FileTemplate.csv">Download</a>

Solution 5:

I was on Laravel, and I follow this tuto to get mine working:

1. create an FileController, add a download method

publicfunctiondownloadFile($file){
   $path = public_path().'/app/upload-folder/'.$file; // or storage_path() if needed$header = [
       'Content-Type' => 'application/*',
   ];
   return response()->download($path, $file, $header);
}

2. create an api entry point in api.php

Route::get('download/upload-folder/{file}', 'FileController@downloadFile');

3. create a method which uses axios

asyncdownloadTemplateFile(file){
    axios.get('/download/template/file/'+file, {responseType: 'arraybuffer'}).then(res=>{
      let blob = newBlob([res.data], {type:'application/*'})
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = file
      link._target = 'blank'
      link.click();
    })
  }

4. call from vue template

<li>Download the CSV template <ahref="#" @click="downloadTemplateFile('FileTemplate.csv')">here</a></li>

Hope this will helps others ;)