element-ui使用axios获取并下载流文件到本地

发布时间：2023-07-07 15:51:05 修改时间：2023-07-07 15:51:05 阅读：1294 评论：0 0

它使用axios从给定的URL下载文件，并将其保存到本地：

To download a file stream using Axios in an Element UI project, you can use the axios.get method to fetch the file stream from the server, and then use the browser’s URL.createObjectURL method to create a URL for the file stream, which can be used to initiate a download. Here’s an example code snippet: 

// Import Axios and Element UI

import axios from 'axios';

import { Message } from 'element-ui';





// Define a function to download a file stream

function downloadFileStream() {

  // Make a GET request to the server for the file stream

  axios.get('/api/download', {

    responseType: 'blob' // Set the response type to 'blob' to get a file stream

  })

  .then(response => {

    // Create a URL for the file stream

    const url = URL.createObjectURL(new Blob([response.data]));





    // Create a link element and set its href to the file stream URL

    const link = document.createElement('a');

    link.href = url;





    // Set the link's download attribute to the file name

    link.setAttribute('download', 'filename.ext');





    // Simulate a click on the link to initiate the download

    link.click();





    // Revoke the URL to free up memory

    URL.revokeObjectURL(url);

  })

  .catch(error => {

    // Handle any errors that occur

    Message.error('Error downloading file.');

    console.error(error);

  });

}

In this example, the axios.get method is used to make a GET request to the server with the responseType set to blob to get a file stream as a blob. Once the file stream is obtained, URL.createObjectURL is used to create a URL for the file stream, which is then used to create a link element with a download attribute set to the file name. Finally, the link is clicked to initiate the download, and the URL is revoked to free up memory.

Note that this is just an example, and the exact implementation may depend on the specific requirements of your project.

以下是封装使用方式： 

import axios from 'axios';

import { Message } from 'element-ui';




/**

 * Downloads a file stream from the server.

 *

 * @param {string} url - The URL of the file to download.

 * @param {string} filename - The name to use for the downloaded file.

 */

export function downloadFileStream(url, filename) {

  axios.get(url, { responseType: 'blob' })

    .then(response => {

      const url = URL.createObjectURL(new Blob([response.data]));

      const link = document.createElement('a');

      link.href = url;

      link.setAttribute('download', filename);

      link.click();

      URL.revokeObjectURL(url);

    })

    .catch(error => {

      Message.error('Error downloading file.');

      console.error(error);

    });

}

In this example, we define a function called downloadFileStream that takes two parameters: url, which is the URL of the file to download, and filename, which is the name to use for the downloaded file. The function makes a GET request to the server using Axios with the responseType set to blob to get a file stream as a blob. Once the file stream is obtained, the function creates a URL for the file stream using URL.createObjectURL, creates a link element with a download attribute set to the specified filename, and then simulates a click on the link to initiate the download.




To use this function, you can simply import it into your code and call it with the appropriate url and filename parameters:




import { downloadFileStream } from './file-utils.js';

downloadFileStream('/api/download', 'filename.ext');

---