Question

我从服务器获取一个png文件。响应如下：

�PNG

IHDR|�<V� IDATx���w�T����ם^����I�
v[$��J��bL����oL�&єob���K��QEQ���RDzoK���˽�?f�Sd��ǃ���s���;�����s�����������������-��@DDDDDDDDDDDD�

当我尝试将其转换为blob并下载时，该文件为空。

  download() {
    return this.http.get(url).map(res => this.downloadFile(res.text()));
  }

  private downloadFile(data) {
    const blob = new Blob([data], {type: 'image/png'});
    const url = window.URL.createObjectURL(blob);
    return url;
  }

this.download(this.config.guid).subscribe(url => {
  var link = document.createElement("a");
  link.href = url;
  link.download = "data.png";
  document.body.appendChild(link);
  link.click();
});

我做错了什么？

Answer 1

如果您不需要支持IE11，fetch可以轻松获取已下载资源的Blob：

fetch(url).then(response => response.blob()).then(blob => {
    // Use the blob here...
    const blobUrl = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = blobUrl;
    link.download = "data.png";
    document.body.appendChild(link);
    link.click();
});

说：我只是将链接设为实际链接，并将Content-Disposition标头设置为attachment; filename=data.png返回数据。当用户点击链接时，浏览器将提供保存文件。

从服务器JS下载文件不起作用

1 个答案: