如何通过 JavaScript 从 url 下载 .js 文件？

Question

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

Answer 1

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 (eg 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.

Answer 2

If I got you right you will need to do a separate get request for the

you can do something like this:

 async function downloadFile(url, fileName) { try { const response = await axios.get(url, { responseType: 'arraybuffer' }); fs.writeFileSync(fileName, response.data); } catch (error) { console.error(error); } }

the writeFileSync will create the file if it does not exist.

if you prefer or need to use promises instead of callbacks use fs.promises.writeFile

Answer 3

To do this, you can follow these steps:

• Make a request to the API using Axios to get the.js file. Create a new Blob object with the file data and create an object URL using the window.URL.createObjectURL() .

• Create a new anchor element and set its href attribute to the object URL. Set the download attribute of the anchor element to the desired file name.

• Append the anchor element to the document body.

• Simulate a click on the anchor element using anchor.click() to initiate the download.

• Clean up the object URL after the download is completed. You can do this by revoking the object URL using window.URL.revokeObjectURL() inside a finally block or by adding an event listener for the loadend event on the anchor element.

Here is an example of how you can modify your code to do this:

downloadScript() {
  ApiService.post(`url`).then((res) => {
    try {
      // Create a new Blob object with the file data
      const blob = new Blob([res.data.path], { type: "application/javascript" });

      // Create an object URL from the Blob
      const url = window.URL.createObjectURL(blob);

      // Create a new anchor element
      const anchor = document.createElement("a");

      // Set the anchor element's href and download attributes
      anchor.href = url;
      anchor.setAttribute("download", "script.js");

      // Append the anchor element to the document body
      document.body.appendChild(anchor);

      // Simulate a click on the anchor element to initiate the download
      anchor.click();

      // Clean up the object URL after the download is completed
      anchor.addEventListener("loadend", () => {
        window.URL.revokeObjectURL(url);
      });
    } catch (error) {
      console.error(error);
    }
  });
},