blob流导出类型

本文介绍了Blob对象在JavaScript中的使用,特别是如何创建和导出Blob流,以及各种常见文件类型的MIME类型,如.doc、.docx、.xls、.xlsx、.ppt和.pptx。通过理解这些知识,开发者可以更好地处理和操作Office文档的在线预览和下载。

blob流导出

const blob = new Blob([content], { type: 'application/octet-stream' })

文件后缀

MIME Type

.doc

application/msword

.docx

application/vnd.openxmlformats-officedocument.wordprocessingml.document

.xls

application/vnd.ms-excel

.xlsx

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

.ppt

application/vnd.ms-powerpoint

.pptx

application/vnd.openxmlformats-officedocument.presentationml.presentation
JavaScript 中,使用 `new Blob` 设置导出文件类型,主要是通过 `Blob` 构造函数的第二个参数来指定 `type` 属性。以下是不同文件类型的设置示例: #### 导出为 Excel 文件(.xlsx) ```javascript function downloadExcel(res) { let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); let url = window.URL.createObjectURL(blob); let fileName = "详情.xlsx"; if ("download" in document.createElement("a")) { let a = document.createElement("a"); a.href = url; a.download = fileName; a.style.display = "none"; document.body.appendChild(a); a.click(); URL.revokeObjectURL(a.href); document.body.removeChild(a); } else { navigator.msSaveBlob(blob, fileName); } } ``` #### 导出为文本文件(.txt) ```javascript const textContent = '这是一段文本内容'; const blob = new Blob([textContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'example.txt'; a.click(); URL.revokeObjectURL(url); ``` #### 导出为 CSV 文件(.csv) ```javascript const csvContent = '姓名,年龄\n张三,25\n李四,30'; const blob = new Blob([csvContent], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'example.csv'; a.click(); URL.revokeObjectURL(url); ``` #### 导出JSON 文件(.json) ```javascript const jsonData = { name: '张三', age: 25 }; const jsonContent = JSON.stringify(jsonData, null, 2); const blob = new Blob([jsonContent], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'example.json'; a.click(); URL.revokeObjectURL(url); ``` #### 导出为 Zip 文件(.zip) ```javascript // 假设 res 是后端返回的 zip 文件流 function downloadZip(res) { let blob = new Blob([res.data], { type: 'application/zip' }); let url = window.URL.createObjectURL(blob); let fileName = "example.zip"; if ("download" in document.createElement("a")) { let a = document.createElement("a"); a.href = url; a.download = fileName; a.style.display = "none"; document.body.appendChild(a); a.click(); URL.revokeObjectURL(a.href); document.body.removeChild(a); } else { navigator.msSaveBlob(blob, fileName); } } ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值