在客户端处理来自`res.download()`的响应（Rest api，快递）

Question

所以快递文档有一个下载 function 格式如下：

res.download(cvUrl, cvName, function (err) {
  if (err) {
     // ...
  } else {
     // ...
  }
})

我认为这通常会触发浏览器使用正确的文件名自动下载文件，因为响应标头设置正确并且我正在接收文件。 但我正在处理这样的下载：

this.admin.getCv(cvUrl).then(cv => {
    const url = window.URL.createObjectURL(new Blob([cv]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'test'); // how can I access the filename here?
    document.body.appendChild(link);
    link.click();
})

是否可以在前端访问文件名（cvName）？ 添加它作为第二个参数似乎是显而易见的解决方案，但没有奏效。 任何提示都会很棒，

谢谢，

缺口

**编辑：

import JRS from '../api/jrs';

export default class Admin {
    getCv (applicantId) {
        return JRS.get(`/admin/cvs/${applicantId}`);
    }
}

// JRS.js

import axios from 'axios';

export default axios.create({
    baseURL: 'http://localhost:8080',
    headers: {
        'Content-Type':  'application/json',
    },
    withCredentials: true
});

Answer 1

download方法将Content-Disposition header 添加到响应中，因此您只需阅读它。

看起来您的getCv function 发出 HTTP 请求，从响应中提取正文，然后用该正文解析 promise。

您需要修改getCv function 使其：

• 读取Content-Disposition header （如何操作取决于您使用的是哪个 HTTP API）
• 从中提取文件名（类似于contentDisposition.match(/filename=(.*)/) ）
• 包括在您正在解析 promise 的数据中（这可能意味着传递包含文件名和正文而不仅仅是正文的 object）

然后您需要更改您的then回调，以便它处理 object 而不是直接期待正文。

---

也就是说，直接链接到 URL 可能更容易，而不是使用 JSON 获取数据，将其转换为data: ZE6B391A8D2C4D45902A23A8B6585703 并在其上触发 DZZ 并在其上生成链接。

Answer 2

这适用于访问文件名和分机，并解决了我在 axios/streams/不可读内容方面遇到的问题，以防它帮助其他人。

对于不可读的内容，将 responseType 添加到请求中很重要。

// 客户端

axios.get('http://localhost:4000/download', {responseType: 'blob'}).then(res => {
    downloadFile(res);
}).catch(err => console.log(err));

const downloadFile = (res) => {
    const contentDisposition = res.headers['content-disposition'];
    const fileName = contentDisposition.split(';')[1].split('=')[1];

    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${fileName}`);
    document.body.appendChild(link);
    link.click();
}

// 服务器

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:2000');
    res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
    next();
});

app.get('/download', (req, res, next) => {
    const test = 'sample.doc';
    const fileUrl = path.join(__dirname, test);
    const fileName = path.basename(fileUrl);
    res.header('Content-Disposition', `attachment; filename=${fileName}`);
    const myReadableStream = fs.createReadStream(path.join(__dirname, test));
    res.status(200);
    myReadableStream.pipe(res);
});