JavaScript中Blob对象转Base64失败，请求技术解决方案

问题重现 #

你通过JSZip生成了类Blob对象，控制台输出显示类似Blob结构，但调用FileReader.readAsDataURL()时触发类型错误，不过saveAs()方法可正常下载文件：

生成对象代码：

var out = doc.getZip().generate({
  type: "blob",
  mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
})

Base64转换代码：

var reader = new FileReader();
reader.readAsDataURL(out); 
reader.onloadend = function() {
  var base64data = reader.result;                
  console.log(base64data);
} 

报错信息：

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

原因 #

JSZip返回的"blob"类型对象并非浏览器原生Blob实例，而是兼容Blob接口的自定义对象。saveAs()能处理这类兼容对象，但FileReader的API对参数类型校验严格，仅接受原生Blob/File实例。

解决方案 #

方案1：将兼容对象转为原生Blob

用原生Blob构造器重新包装原对象，生成标准Blob实例后再进行转换：

var out = doc.getZip().generate({
  type: "blob",
  mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});

// 转换为原生Blob
const nativeBlob = new Blob([out], { type: out.type });

// 执行Base64转换
const reader = new FileReader();
reader.readAsDataURL(nativeBlob);
reader.onloadend = function() {
  const base64data = reader.result;
  console.log(base64data);
};

方案2：直接让JSZip输出Base64（更高效）

既然最终目标是获取Base64，可跳过Blob生成步骤，直接让JSZip输出base64格式：

// 直接生成base64字符串
const base64data = doc.getZip().generate({
  type: "base64",
  mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});

// 如需完整Data URI，自行拼接前缀
const dataUri = `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${base64data}`;
console.log(dataUri);

说明 #

方案2减少了中间转换环节，性能更优；方案1则保留了Blob对象的使用场景，适合需要同时操作Blob和Base64的场景。

内容的提问来源于stack exchange，提问作者nawaz uddin