How to Download a Locally Stored File in Vuejs

How to download a locally stored file in VueJS

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.

Downloading file from local folder using vue

Use the following instead:

/ ...
const link = document.createElement("a");
link.href = '... path to donwload';
link.setAttribute("download", "file.doc");
link.click();

You need your docs folder on your public directory.

How to download a local CSV file from a vue.js webpage?

Are you using vue-cli? If you do i guess you could do something like

import csvFile from "../assets/example.csv"

export default {
  name: "Template",
  data() {
    return {
      item: csvFile
    }
  }
}

// in your template

<a :href="item"> </a>

If your csv-file isn't dynamically generated, you could probably use it as a static asset and just link to it's path. It's been a while since i've done anything with Vue, but according to a quick glance at the docs i think you can put your csv file into your static folder and reference it like this:

<a href="./assets/example.csv">{{someTitle}}</a>

Link to docs:
https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation

Vue/HTML/JS how to download a file to browser using the download tag

You can fetch the file as a blob and provide it the same way, there will be no request that leads into CORS issues.

Template

<a
  :href="item.url"
  v-text="item.label"
  @click.prevent="downloadItem(item)" />

Vue

methods: {
  downloadItem ({ url, label }) {
    Axios.get(url, { responseType: 'blob' })
      .then(response => {
        const blob = new Blob([response.data], { type: 'application/pdf' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = label
        link.click()
        URL.revokeObjectURL(link.href)
      }).catch(console.error)
  }
}

Notes: I used Axios for my example but that's not a requirement, the blob's mime type is hardwired for the sake of simplicity.

Exporting a webpage containing VueJS to a locally stored HTML file

Ok, posting for posterity:
The problem was that the components in the file were already replaced by their VueJS templates in the original html, and therefore not being mounted in the downloaded static file.

The solution was to generate the HTML in the backend (in this case with a Laravel render()) function, and stream that into a file for the user. This file then does contain the correct components, which are in turn substituted by the VueJS javscript.

How to download a PDF in Vue

Relative imports should work by default with Vue. Try putting your PDF file into the /public folder of your application.
You can then reference the file using string interpolation, like so:

<link rel="icon" href="<%= BASE_URL %>its_me.pdf">

More information is available at
https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation

If that doesn't work, something might be wrong with your Webpack or build configuration.

---

Related Topics