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

它使用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');

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.T's Blog

感谢打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值