I try to download a local file with a button but the file cannot be found

user_15658943 0
Viewed 133

I'm trying to add a button on my page so that when I click on it, it downloads a file on the web browser I use. The file I want to download is on my project:

enter image description here

And the script for the button is as follows:

download(){
      const link = document.createElement("a")
      link.href = "../../public/Programme robot/programme_palettisation_robot.tb"
      link.setAttribute("download", "programme_palettisation_robot.tb")
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      setTimeout(function() { URL.revokeObjectURL(link.href); },1500)
    }

The problem is that when I click on the button, it says that the file cannot be found.

enter image description here

Can you help me with this?

vue.js javascript
2 Answers

I presume you are using the Vue CLI. Vue is running a local server in dev mode, basically creating a structure similar to the one you can see in the dist folder. Your links href is not parsed by webpack at build time, which is why you are actually trying to load the file relative from root.

Using an absolute file path should therefore fix it.

link.href = "/Programme robot/programme_palettisation_robot.tb"
user_122916570

I found what was the problem (i think). The file I wanted to download was a .tb which I think is not supported by VueJS. I put this file into a .zip folder and now it works.

user_156589430
Related