后端返回文件流，前端怎么导出、下载（8种方法可实现）

在现代Web应用中，后端常常需要返回文件流，比如PDF、Excel、图片等文件，前端需要将这些文件导出或下载。下面，我将介绍8种实现前端下载文件流的方法，并附上代码示例。

方法1：使用a标签和Blob对象

Blob对象可以用于构造要下载的文件。通过创建一个URL并通过<a>标签进行下载。

function downloadFile(blob, fileName) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

// 后端返回文件流
fetch('/api/download')
    .then(response => response.blob())
    .then(blob => downloadFile(blob, 'example.pdf'));

方法2：使用fetch和FileSaver.js

FileSaver.js是一个非常流行的库，可以简化文件的下载。

import { saveAs } from 'file-saver';

fetch('/api/download')
    .then(response => response.blob())
    .then(blob => {
        saveAs(blob, 'example.pdf');
    });

方法3：使用XMLHttpRequest

XMLHttpRequest允许我们手动处理响应流。

function downloadFileWithXHR() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/download', true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        const blob = xhr.response;
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'example.pdf';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };
    xhr.send();
}

方法4：使用iframe下载

通过在页面中创建一个隐藏的iframe来发起下载请求。

function downloadFileWithIframe() {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = '/api/download';
    document.body.appendChild(iframe);
}

方法5：后端透传cookie

有时候需要在请求中携带认证信息，可以通过设置credentials为include。

fetch('/api/download', {
    method: 'GET',
    credentials: 'include'
})
    .then(response => response.blob())
    .then(blob => downloadFile(blob, 'example.pdf'));

方法6：使用FormData上传的POST请求

如果需要通过POST请求下载文件，可以使用FormData。

function downloadFileWithPost(data) {
    fetch('/api/download', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.blob())
        .then(blob => downloadFile(blob, 'example.pdf'));
}

方法7：使用Response对象的stream()方法（较新特性）

如果使用Service Worker或较新浏览器特性，可以使用流式响应。

fetch('/api/download')
    .then(response => {
        const reader = response.body.getReader();
        const chunks = [];
        return reader.read().then(function processText({ done, value }) {
            if (done) {
                const blob = new Blob(chunks);
                downloadFile(blob, 'example.pdf');
                return;
            }
            chunks.push(value);
            return reader.read().then(processText);
        });
    });

方法8：使用第三方库

一些文件下载库如axios也可以简化这一过程。

import axios from 'axios';

axios.get('/api/download', { responseType: 'blob' })
    .then(response => {
        const blob = new Blob([response.data]);
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'example.pdf';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });

总结

以上8种方法展示了在不同场景下，如何处理后端返回的文件流，实现前端下载。这些方法涵盖了从原生JavaScript到使用流行库的多种实现方式，可根据具体需求选择合适的方法。希望这些示例对你在开发中有所帮助！