14 JavaScript methods to achieve file download

useaTagsdownloadproperty:

function downloadFile(url, fileName) {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // Optional, if you want to download the file in a new window, please uncomment this line
  link.click();
}

Using this function, you can pass in the URL and file name of the file as parameters. Then, create a<a>element, assign URL tohrefAttribute, assign the file name todownloadAttributes, finally trigger click on the link to download the file.

usefetchAPI andBlobObject:

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.target = "_blank"; // Optional, if you want to download the file in a new window, please uncomment this line
      link.click();
    });
}

This function will usefetchAPI takes binary data of a file and encapsulates it asBlobObject. Then, create a temporary link,BlobThe URL of the object is assigned to the linkedhrefProperties and setdownloadThe attribute is the file name, and finally triggers clicking on the link to download.

useXMLHttpRequestObject:

function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    const blob = xhr.response;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.target = "_blank"; // Optional, if you want to download the file in a new window, please uncomment this line
    link.click();
  };
  xhr.send();
}

This function usesXMLHttpRequestThe object sends a GET request to get the binary data of the file and creates a temporary link to download after the request is completed.

Using one of these methods, you can implement file download functionality in JavaScript. Just call the corresponding download function and pass in the URL and file name of the file to download the file. Please note that to ensure compatibility, it is recommended to place the download operation in the context of user interaction, such as triggering the download operation when a button or link is clicked. This can avoid the browser's restrictions on automatic download behavior.

use:

function downloadFile(url) {
  window.location.href = url;
}

This method is simple and straightforward,Redirect the browser to the URL of the file and trigger the file download. However, this method does not provide an option to specify a file name.

useLibrary:
It is a lightweight JavaScript library that simplifies the process of downloading files. You can use it through the following steps:

IntroducedLibrary:

<script src="/ajax/libs/downloadjs/1.4.8/"></script>

usedownload()Functions for file download:

function downloadFile(url, fileName) {
  download(url, fileName);
}

This function usesProvideddownload()Function to implement file download. You can pass in the URL and file name of the file as parameters.

Download the file using the backend API:
If the file needs to be processed or needs to be authenticated, you can download the file by calling the backend API. In the backend, a file can be generated based on the request parameters and returned to the frontend as part of the response. The front-end can call the back-end API and download the file through AJAX request or using other appropriate methods.

Please note that for cross-domain file downloads, corresponding configurations may be required on the server side to allow cross-domain downloads. Additionally, some browsers have restricted automatic download behavior, so it is best to put the download operation in the context of user interaction.

Using HTML5downloadproperty:
HTML5aThe tag provides adownloadAttributes, you can directly specify the file name to achieve file download. This approach does not require JavaScript intervention, justaSettings in the taghrefanddownloadAttributes:

<a href="path/to/" download="">Download</a>

When the user clicks this link, the browser will automatically download the file and use the specified file name.

Use JavaScript to implement streaming downloads:
For large files or files that require dynamically generated, JavaScript can be used to achieve streaming downloads. This approach involves sending file contents chunked to the client and receiving and saving file contents chunked by chunk through JavaScript. Here is a simple example:

function downloadFile(url) {
  fetch(url)
    .then(response => {
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
              controller.enqueue(value);
              push();
            });
          }
          push();
        }
      });
      const blob = new Blob([stream], { type: response.headers.get('Content-Type') });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = '';
      link.target = "_blank"; // Optional, if you want to download the file in a new window, please uncomment this line
      link.click();
    });
}

This function usesfetchThe API gets the content of the file and streams the content of the file block by block to avoid loading the entire file at once. Then, create a file containing the contentsBlobObject and download using temporary links.

Use the library:
is a popular JavaScript library for saving files on the client side. It provides a simple API to save Blob or File objects. You can use it through the following steps:

Introduced library:

<script src="/ajax/libs//2.0.5/"></script>

Use the saveAs() function to download the file:

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, fileName);
    });
}

This function uses the saveAs() function provided to implement file download. It first uses the fetch API to get the binary data of the file and encapsulate it into a Blob object, and then calls the saveAs() function to trigger the file download.

Use iframe for hidden downloads:
Sometimes, you may want to download a file without opening a new window or changing the current page. You can create a hidden iframe element and set the URL of the file you want to download to the src property of the iframe. This way, the file will be downloaded in the background.

function downloadFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
}

This function creates a hidden iframe element and assigns the URL to it. This will trigger file download without any visible changes to the user interface.

Using WebSocket or Server-Sent Events:
If you need to download data in real time, or need to trigger file downloads based on specific events, consider using WebSocket or Server-Sent Events (SSE). By establishing a long connection with the server, you can receive file data from the server when specific conditions are met and download files from the client.
Use server redirection:
In some cases, file downloads may require specific processing or verification. You can download the file by generating a file on the server side and redirecting the user to the URL of the file. This method requires corresponding processing on the server side and appropriate response headers are set to ensure that the file is downloaded in attachments.
Using the Blob URL:
A Blob URL is a special URL that represents a Blob object. You can encapsulate file data into Blob objects and create a Blob URL using the createObjectURL() method. Then, assign the Blob URL to the href attribute of the download link to enable file download.

function downloadFile(data, fileName) {
  const blob = new Blob([data]);
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // Optional, if you want to download the file in a new window, please uncomment this line
  link.click();
  
  URL.revokeObjectURL(url);
}

This function takes file data and file name as parameters and implements file download through Blob URL. First, wrap the file data into a Blob object, and then create the Blob URL using the createObjectURL() method. Next, create a download link, assign the Blob URL to the link's href attribute, set the file name, and other options, and finally trigger clicking the link to download. Finally, use the revokeObjectURL() method to release the resource of the Blob URL.

Using WebRTC data channels:
If your application is based on WebRTC technology, you can use data channels to enable file transfer and download. WebRTC data channels provide point-to-point real-time data transfer capabilities that can be used to transfer file data from the sender to the receiver. You can divide the file data into packets and send them one by one through the data channel. The receiver can reassemble the packet into a file and download it.

Using the WebRTC data channel for file transfer and download involves two roles: the sender and the receiver. Here are the basic steps for using the WebRTC data channel to implement file download:

Sender:

Create a WebRTC connection and establish a connection with the receiver through the signaling server.
After the connection is established, create a data channel and send file data through that channel.
Split the file data into smaller packets and sent one by one through the data channel.
Once all packets are sent, close the data channel and WebRTC connection.

Receiver:

Create a WebRTC connection and establish a connection with the sender through the signaling server.
After the connection is established, listen for data channel events on the connection.
When a data packet is received from the data channel, it is saved to the buffer.
After receiving all data packets, the data in the buffer is assembled into a file and downloaded.
Close the data channel and WebRTC connection.

Here is a simple example code showing how to implement file download using the WebRTC data channel:

// Create WebRTC connections and data channels
const pc = new RTCPeerConnection();
const channel = pc.createDataChannel('fileTransfer');

// Listen to the data channel opening event
channel.onopen = () => {
  console.log('Data channel opened');
  
  // Read files and send data
  readFileAndSendData();
};

// Read files and send data
function readFileAndSendData() {
  // Read file data (assuming the file data is ready)
  const fileData = getFileData();
  
  // Split file data into data packets
  const chunkSize = 16384; // Size of each packet
  const totalChunks = Math.ceil(fileData.byteLength / chunkSize);
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, fileData.byteLength);
    const chunk = fileData.slice(start, end);
    
    // Send data packets
    channel.send(chunk);
  }
  
  // Close the data channel and connection after the sending is completed
  channel.close();
  pc.close();
}

// Initiate a WebRTC connection and establish a connection with the receiver
// The interaction steps with the signaling server are omitted here

Receiver code:

// Create a WebRTC connection
const pc = new RTCPeerConnection();

// Listen to data channel events on the connection
pc.ondatachannel = event => {
  const channel = event.channel;
  
  channel.onmessage = event => {
    // Receive the data packet and save it to the buffer
    const chunk = event.data;
    saveChunk(chunk);
  };
  
  channel.onclose = () => {
    console.log('Data channel closed');
    
    // After all data packets are received, assemble the file and download it
    const fileData = assembleFileFromChunks();
    downloadFile(fileData);
  };
};

// Create a WebRTC connection and establish a connection with the sender
// The interaction steps with the signaling server are omitted here