Skip to content
Advertisement

How to download .js file by JavaScript from an url?

I know this question is asked hundreds of time in this forum, But I’m trying to download a .js file from an url in my Vue 2 application, but it’s not working. Here is what I’m trying:

downloadScript() {
      ApiService.post(`url`).then((res) => {    // axios
        try {
          // Create a new link
          const url = window.URL.createObjectURL(new Blob([res.data.path]));
          const anchor = document.createElement("a");
          anchor.href = url;.js";
          anchor.setAttribute("download", "script.js");
          document.body.appendChild(anchor);
          anchor.click();
        } catch {
         //
        }
      });
    },

This downloads a file which consists nothing but the url I’ve provided to the axios post request.

I’m getting API response like following:

{
    "success": true,
    "path": "https://something.com/files/iq-return.min.js"
}

I’ve to donwload the script in a file from the path

Advertisement

Answer

new Blob([res.data.path]) creates a Blob (which is sort-of-like-a-file) containing the text in the string you pass it.

Since that text is a URL, the file you download is a text file containing that URL.

If you want to create a Blob containing the JavaScript source code, then you need to get the JS source code. Make an HTTP request to the URL (e.g. with fetch) and put the response body in the Blob.

(Aside: don’t append .js to the generated URL with you set href, that modifies the contents of the file!)

This will, of course, require permission from CORS if this is a cross-origin request.

If it isn’t a cross-origin request then you can just set the href attribute to res.data.path without leaping through all these hoops.

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement