Typescript 浏览器中的SheetJS（js xlsx）：从Blob中读取工作簿

我遇到一堵墙，试图使用SheetJS从

Blob

构建工作簿对象，而不是像拖放或文件输入元素事件这样的客户端事件。后面的两个都包含在中，但我缺少从我拥有的

Blob

通过

FileReader

事件向后转换到

XLSX.read（）

API所需的JS fu

在浏览器中给定一个

Blob

，这是如何实现的，或者可以实现吗？

您可以这样做

var wb = XLSX.read(await blob.arrayBuffer(), { type: "array" });

---

我正在使用以下代码保存到XLSX：

从“XLSX”导入XLSX
从“文件保护程序”导入{saveAs}
导出函数saveAsXlsx（{fileName='export'，worksheets}:Params）{
const blob=getXlsxBlob（工作表）
saveAs（blob，`${fileName}.xlsx`）
}
导出函数getXlsxBlob（工作表：工作表[]）{
const workbook=XLSX.utils.book\u new（）
forEach（{name，header，body}）=>{
const sheet=XLSX.utils.json_to_sheet（body，{header}）
XLSX.utils.book\u append\u工作表（工作簿、工作表、名称）
})
常量工作簿输出=XLSX.write（工作簿{
类型：“二进制”，
书籍类型：“xlsx”
})
返回新Blob（[stringToArrayBuffer（workbookOutput）]{
类型：“应用程序/八位字节流”
})
}
接口参数{
文件名？：字符串
工作表：工作表[]
}
导出接口工作表{
名称：string
标题：T[]
正文：记录[]
}
函数stringToArrayBuffer（字符串：string）{
const buffer=new ArrayBuffer（string.length）
常量视图=新的Uint8Array（缓冲区）
对于（让i=0；i

然后我试着测试代码。我决定不去处理真实的文件，所以我将大部分复杂性提取到

getXlsxBlob

中，并专注于测试该部分

以下是我尝试测试的代码：

从“xlsx”导入xlsx
从“/saveAsXlsx”导入{getXlsxBlob，工作表}
施工人员：工作表={
姓名：'人'，
标题：['Name'，'Age']，
正文：[
{
姓名：“约翰·多伊”，
年龄:37
},
{姓名：'Jane Doe'，年龄：35}
]
}
常数车：工作表={
名称：“汽车”，
标题：[“品牌”、“型号”、“颜色”]，
正文：[
{品牌：“丰田”，型号：“RAV4”，颜色：“红色”}，
{品牌：“萨博”，型号：“9-3”，颜色：“蓝色”}
]
}
测试（'getXlsxBlob'，异步（）=>{
const blob=getXlsxBlob（[人，车]）
const arrayBuffer=await blob.arrayBuffer（）
常量工作簿=xlsx.read（arrayBuffer，{type:'array'}）
expect（workbook.SheetNames）.toEqual（['People'，'Cars']））
expect（xlsx.utils.sheet_to_json（workbook.Sheets['People']））
.toEqual（人、身体）
expect（xlsx.utils.sheet_to_json（workbook.Sheets['Cars'））.toEqual（Cars.body）
})

它爆炸了

    TypeError: blob.arrayBuffer is not a function

      26 | test('getXlsxBlob', async () => {
      27 |   const blob = getXlsxBlob([people, cars])
    > 28 |   const arrayBuffer = await blob.arrayBuffer()
         |                                  ^

（如果你知道的话，我很想知道原因——请在评论中分享）

但是求助于

FileReader

有助于：

test（'getXlsxBlob'，async（）=>{
// ...
const arrayBuffer=等待读取arrayBuffer（blob）
//而不是
//const arrayBuffer=await blob.arrayBuffer（）
// ...
})
函数readAsArrayBuffer（blob:blob）{
返回新承诺（（解决）=>{
const reader=new FileReader（）
reader.onload=（事件）=>{
解析（event.target？result）
}
reader.readAsArrayBuffer（blob）
})
}

不幸的是，我现在与这段代码有点分离，但我会尽可能地验证这一点。谢谢你看这个问题！当我看到任何超过几天的东西时，总是让我感到惊讶。很简单，我面对同样的问题，发现你的问题没有答案。在我自己尝试了几次之后（文档非常有限），我找到了一个解决方案，并想与大家分享它，以防它能为大家节省半个小时。谢谢@FranckJeannin。我为此挣扎了一个小时。@SanketTarodekar不客气。