使用Axios下载二进制文件

Question

例如，下载PDF文件：

axios.get('/file.pdf', {
      responseType: 'arraybuffer',
      headers: {
        'Accept': 'application/pdf'
      }
}).then(response => {
    const blob = new Blob([response.data], {
      type: 'application/pdf',
    });
    FileSaver.saveAs(blob, 'file.pdf');
});

下载文件的内容是：

[object Object]

这里出了什么问题？为什么二进制数据没有保存到文件中？

- Anton Pelykh

---

FileSaver被定义为什么？ - vityavv

@zevee import FileSaver from 'file-saver'; 但这不应该是个问题。我甚至尝试了 downloadjs 库，结果也一样。 - Anton Pelykh

可能与 Babel 编译器有关。 - Anton Pelykh

Answer 1

我能够创建一个可行的要点（不使用FileSaver），如下所示：

axios.get("http://my-server:8080/reports/my-sample-report/",
        {
            responseType: 'arraybuffer',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/pdf'
            }
        })
        .then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'file.pdf'); //or any other extension
            document.body.appendChild(link);
            link.click();
        })
        .catch((error) => console.log(error));

- Nayab Siddiqui

---

谢谢。很高兴能帮到你。干杯！ - Nayab Siddiqui

谢谢，“responseType: 'arraybuffer'”是我错过的部分。 - Right leg

“responseType: 'arraybuffer'”是解决方案。 - Daniel Elkington

哇塞，你真是救星啊。我在粘贴这段代码之前就知道它会起作用了。 - user8737957

用这个工具下载从FastAPI作为流式响应发送的xlsx文件。其他问题上的许多解决方案过于复杂，似乎也不再起作用了，但这个工具简单且完美地运行！ - undefined

Answer 2

根据Nayab Siddiqui的答案，我成功地下载了一个.tgz文件。

const fsPromises = require('fs').promises;
const axios = require('axios'); 

await axios.get('http://myServer/myFile.tgz',
        {
            responseType: 'arraybuffer', // Important
            headers: {
                'Content-Type': 'application/gzip'
            }
        })
        .then(async response => {
            await fsPromises.writeFile(__dirname + '/myFile.tgz', response.data, { encoding: 'binary' });
        })
        .catch(error => {
            console.log({ error });
        });

- Shmulik Kreitenberger

Answer 3

这种方法可能对未来寻找答案的人有所帮助。

var axios = require("axios");
const fs = require("fs");

var config = {
  method: "get",
  url: YOUR_REQUEST_URL,
  responseType: "arraybuffer",
  headers: {
   //put your headers here if any required
  },
};

axios(config)
  .then(function (response) {
    fs.writeFileSync("/path/to/file", Buffer.from(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });

- Aayush Neupane

Answer 4

---

看起来response.data只是一个普通的对象。Blob接受它们的第一个参数为“ArrayBuffer、ArrayBufferView、Blob或DOMString对象的数组”。

尝试用JSON.stringify将其包装起来。

const blob = new Blob([JSON.stringify(response.data)]

然后它将满足DOMString的要求。

- proto_khal