Reverse FileReader - 从字符串中重新组合文件

Question

我得到的文件是一个字符串：

const r = new FileReader()
r.readAsText(file, 'UTF-8')
r.onload = (evt) => {
     this.file = evt.target.result
};

上传 Zip、文本或图像文件后，我的字符串如下所示：data:text/plain;base64,VTJGc.....

如何反转 readAsText 并获得可下载的文件？

Answer 1

你得到的“字符串”是一个Base64URL（你可以复制粘贴到新的浏览器选项卡中查看内容），它实际上简化了文件的下载，所以请不要反转过程。

一种方法是在 HTML 中创建一个 link 元素并单击它：
_{该示例无法运行，因为它位于权限受限的嵌入中。}

function download(b64, name) {
  const a = document.createElement("a");
  a.href = b64;
  a.download = name;
  document.body.appendChild(a);
  a.click();
}

download("data:text;base64,SGVsbG8sIHdvcmxkIQ==", "helloworld.txt");

如果你真的想反转这个过程，你可以用 atob() 轻松解码 Base64:

const decode = str =>
  atob(str.replace(/^data:\w+;base64,/, "")); // remove `data:text;base64,`


console.log(decode("data:text;base64,SGVsbG8sIHdvcmxkIQ=="));

Reverse FileReader - 从字符串中重新组合文件

Reverse FileReader - Reassamble file from string

javascript

filereader

vue.js