react在前端模拟后端接口返回的pdf文件流

在React前端模拟后端接口返回PDF文件流通常涉及以下步骤：

1. 创建一个模拟的后端接口，使用一些node库如`express`和`fs`来读取文件并返回文件流。
2. 在React前端，使用`fetch`或者`axios`等HTTP客户端库发起请求到模拟的后端接口，并指定响应类型为`blob`。
3. 从响应中获取到的`blob`对象可以使用`URL.createObjectURL`创建一个可以下载的URL，然后通过`<a>`标签的`href`属性或者使用`window.open`方法触发下载。

下面是一个简单的示例实现：

后端代码示例（使用Node.js）:

const express = require('express');
const fs = require('fs');
const app = express();

app.get('/download-pdf', (req, res) => {
    const pdfPath = 'path/to/your/file.pdf';
    fs.readFile(pdfPath, (err, data) => {
        if (err) {
            res.status(500).send('Error reading file');
            return;
        }
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=yourfile.pdf');
        res.end(data);
    });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

前端React代码示例:

function downloadPDF() {
    fetch('/download-pdf')
        .then(response => response.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'yourfile.pdf';
            document.body.appendChild(a);
            a.click();
            a.remove();
        })
        .catch(error => {
            console.error('Error downloading file:', error);
        });
}

// 调用downloadPDF函数来触发下载
downloadPDF();