banner
leoking

leoking

前端开发者
tg_channel

vue2 uses get to download Excel

axios#

import axios from 'axios';

// Define the function to download the Excel file
function downloadExcel() {
  axios.get('http://example.com/download-excel', {
    responseType: 'blob', // Specify the response data type as Blob
  })
    .then(response => {
      // Create a temporary URL object
      const url = URL.createObjectURL(new Blob([response.data]));

      // Create an 'a' tag and set its attributes
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'filename.xlsx'); // Specify the downloaded file name

      // Add the 'a' tag to the document and simulate a click to download
      document.body.appendChild(link);
      link.click();

      // Clean up the temporary URL object
      URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error('Error downloading the Excel file:', error);
    });
}

In the above example, we use axios to send a GET request and set the response type as blob to receive binary data. Then, we convert the binary data of the response into a Blob object and create a temporary URL object. Next, we create an 'a' tag and set its href attribute to the temporary URL, while specifying the downloaded file name. We add the 'a' tag to the document and simulate a click on it to trigger the file download. Finally, we clean up the temporary URL object to release resources.

Please make sure to replace the URL (http://example.com/download-excel) in the example with the actual URL for downloading your Excel file, and modify the file name (filename.xlsx) as needed.

fetch#

Here is an example code using fetch:

fetch('http://example.com/download-excel', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // Set the file type as Excel
  }
})
  .then(response => response.blob())
  .then(blob => {
    // Create a temporary URL object
    const url = URL.createObjectURL(blob);

    // Create an 'a' tag and set its attributes
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.xlsx'; // Specify the downloaded file name

    // Add the 'a' tag to the document and simulate a click to download
    document.body.appendChild(link);
    link.click();

    // Clean up the temporary URL object
    URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('Error downloading the Excel file:', error);
  });

In the above example, we use fetch to send a GET request and set the Content-Type header to the MIME type of an Excel file. Then, we use the response.blob() method to convert the response into a Blob object. Next, we create a temporary URL object and set it as the href attribute of an 'a' tag. We also specify the downloaded file name. We add the 'a' tag to the document and simulate a click on it to trigger the file download. Finally, we clean up the temporary URL object to release resources.

Please make sure to replace the URL (http://example.com/download-excel) in the example with the actual URL for downloading your Excel file, and modify the file name (filename.xlsx) and the file type in the request header as needed.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.