从文件输出流下载 png 文件

【问题标题】：Downloading png file from fileoutputstream从文件输出流下载 png 文件
【发布时间】：2019-06-04 04:08:53
【问题描述】：

我正在尝试将 png 文件下载到作为文件输出流的计算机。我正在尝试这段代码：

var userid = this.userid;
  let link = null;
  function reqListener() {
    if (this.responseText !== undefined) {
       link = document.createElement("a");
      var blob = new Blob([this.responseText], { type: item.type });
      link.download = item.name;
      link.href = (window.URL || window.webkitURL).createObjectURL(blob);
      debugger;
      link.click();

    }
  }
}

它下载了一个文件，但无法打开。无法将其加载为 png 时出现错误。它适用于其他类型的文件，但不适用于图像文件。我该如何处理？

【问题讨论】：

标签： javascript image file download

【解决方案1】：

link.setAttribute('href', 'data:[<mediatype>][;base64],<data>');

图像的媒体类型

图片/gif
图片/JPEG
图片/png
图片/svg+xml
image/x-icon、image/vnd.microsoft.icon（适用于 Windows 图标）

Base64

数据:,Hello%2C%20World!

简单的文本/纯数据

数据：text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

上述的base64编码版本

你需要什么？

你需要，href属性的这个字符串，

link.setAttribute('href', `data:image/png;base64,${btoa(this.responseText)}`)

【讨论】：