浏览器下载本地数据

最新推荐文章于 2025-06-26 11:12:39 发布

weixin_30776545

最新推荐文章于 2025-06-26 11:12:39 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gsgs/p/7840330.html

场景：已经拿到了数据，非直接下载，示例为下载csv文件

ie和非ie下载不同

ie下载：

// 当执行如下代码，会生产“文件名字.csv"的文件，csv跟excel是一样的。
let data = new Blob(['a, b, c, \naa, bb, cc'], {type: 'text/csv'}) // Blob转换为二进制数据，类型为text/csv  第一个参数\n为换行，逗号为换列。
  navigator.msSaveBlob(data, '文件名字.csv')

非ie

方式一：
let a = document.createElement('a') // 创建a标签
a.download = '文件名字.csv' // 下载后文件名字
let data = new Blob(['a, b, c, \naa, bb, cc'], {type: 'text/csv'})
a.href = URL.createObjectURL(data) // 转换为url地址
document.body.appendChild(a) // 添加a标签
a.click() // a标签点击

方式二： 不转换二进制

let a =document.createElement('a')

a.download = '文件名字.csv'

a.href= 'data:text/csv;charset=utf-8,' + encodeURI('a, b, c, \naa, bb, cc') // 使用dataUrl: data:test/csv 其中data为dataUrl的头 text/csv为类型分号表示第二个参数逗号过后添加参数。

document.body.appendChild(a)

a.click()

补充：

Blob([data], {type: 'application/json'}) 其中data是字符串或者arraybuffer，返回blob对象

reader = new FileReader: reader为读取文件的对象，reader.readAsArrayBuffer(data) 其中data为 file(input.files[x])或者blob

URL.createObjectURL(blob) 可以将blob 转换为可以使用的url

转载于:https://www.cnblogs.com/gsgs/p/7840330.html