如何将 fileInput 元素的结果下载为任何类型文件的文件？

Question

目前我可以读取 fileInput 元素的 onChange 结果，作为 base64 字符串。

我想在页面上实现一个 link，以便不同的用户可以下载与生成的 base64 或 blob 相同的文件。

作为补充，文件类型未知。因为我想要支持任何文件类型。或者图片、MS office 和文本文件中的一些流行文件类型。

让我把我当前的代码放在下面。

//index.js

const fileInput="fileInput";
init();
function init(){
   document.getElementById(fileInput).addEventListener('change', readFile);
   document.getElementById(fileInput).addEventListener('click',  (e) => {
      e.target.value = '';
   });
}

function readFile(){
var file = document.getElementById(fileInput).files[0];
readFile2(file);


function readFile2(file) {
var reader = new FileReader();
reader.readAsDataURL(file);

reader.onload =async function () {
   const myBlob=await (reader.result); //I assume this is a blob.
   const fileToStr=myBlob.toString();
   alert(fileToStr); //base64

   const blobUrl = URL.createObjectURL(myBlob);//ERROR
/*
index.js:22 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at FileReader.reader.onload (index.js:22)
*/

   var link = document.createElement("a"); // Or maybe get it from the current document
link.href = blobUrl;
link.download = "aDefaultFileName.txt";// I want any file type supported.
link.innerHTML = "Click here to download the file";
document.body.appendChild(link); // Or append it whereever you want
//console.log(fileToStr);
}}}

Answer 1

我不知道你为什么要这样做，但你可以直接在你的文件上使用 URL.createObjectURL()。

文件对象实现与 blob 相同的接口。无需实际读取文件 link 到它。

Answer 2

要支持所有文件类型，编辑如下：

//reader.readAsDataURL(file);
reader.readAsBinaryString( file );

要从 blob 创建文件对象，请编辑如下：

const myBlob=await (reader.result); //I assume this is a blob.
const fileToStr=myBlob.toString();
//const blobUrl = URL.createObjectURL(myBlob);//ERROR

const file2=new File([fileToStr], "filename");
const blobUrl = URL.createObjectURL(file2);

如何将 fileInput 元素的结果下载为任何类型文件的文件？

How to download a result of a fileInput element as a file for any kind of file type?

html

javascript

blob