html5 download blob



https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link

https://stackoverflow.com/questions/6165266/downloading-mp3-files-using-html5-blobs-in-a-chrome-extension

https://codepen.io/vidhill/pen/bNPEmX

html 5 Simple File Blob Download

demo


// <a id="myButton" href="#">Download JSON</button>
// <button id="btn">Download JSON</button> // dummy json data to save
const data = {
x: 42,
s: "hello, world",
d: new Date()
}; let btn = document.getElementById("btn"); btn.addEventListener(`click`, (e) => {
let json = JSON.stringify(data),
// Blob
blob = new Blob([json], {type: "octet/stream"}),
// blob to url
url = window.URL.createObjectURL(blob);
this.href = url;
this.download = "api.json";
this.target = "_blank";
// target filename
});

html5 download blob的更多相关文章

  1. html5 download all in one

    html5 download all in one HTML5 download & Fetch API & File API & Blob https://scarletsk ...

  2. HTML5 download 执行条件

    HTML5 download 执行条件 同一个域名下的资源 http only 绝对路径/相对路径 都可以 demo https://cdn.xgqfrms.xyz/ https://cdn.xgqf ...

  3. HTML5 Video Blob

    我的博客搬家到https://www.w2le.com/了 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a9 ...

  4. HTML5中的二进制大对象Blob(转)

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  5. HTML5新特性之文件和二进制数据的操作

    历史上,JavaScript无法处理二进制数据.如果一定要处理的话,只能使用charCodeAt()方法,一个个字节地从文字编码转成二进制数据,还有一种办法是将二进制数据转成Base64编码,再进行处 ...

  6. HTML5 FileAPI读取实例---(一)

    在HTML5中,提供了一个关于文件操作的API,通过这个API,对于从web页面上访问本地文件系统的相关处理变得十分简单.到目前为止只有部分浏览器对它提供支持. 1.FileList对象和File对象 ...

  7. 搞懂前端二进制系列(一):🍇 认识Blob对象

    参考资料: https://juejin.cn/post/6844904183661854727 [你不知道的Blob] https://juejin.cn/post/6844904144453517 ...

  8. 【JS】前端文件下载(无刷新)方法总结

    #传统方法 利用iframe 或 form.submit 或 windows.open直接向后端发请求,后端返回文件流,后端处理成功后会直接返回到页面,浏览器会整理并打开自己的保存下载文件机制 . 1 ...

  9. js之Ajax下载文件

    传统上,客户端将依靠浏览器来处理从服务器下载文件.然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为.为下载请求添加额外的头信息也很困难.更好的解决方案是使用HTM ...

随机推荐

  1. vue 城市列表与字母表联动

    实现两个联动 一是点击右侧字母的时候,城市列表出现相应首字母下的城市 二是鼠标在字母表上滑动的时候,城市列表实时跟着变化 一.点击字母出现相应的列表,给每个字母设置handleLetterClick事 ...

  2. javascript入门笔记5-事件

    1.继续循环continue; continue的作用是仅仅跳过本次循环,而整个循环体继续执行. 语句结构: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue ...

  3. iOS面试题总结(持续更新)

    过段时间打算跳槽,找了一些面试题来做,在这里做个总结方便review,希望能对要面试的童鞋有帮助. 以下为面试题: 运行以下代码会有什么结果 NSString *str1 = @"str1& ...

  4. 文本处理工具-AWK

    awk简介 awk功能与sed相似,都是用来进行文本处理的.awk可以自动地搜索输入文件,并把每一个输入行切分成字段.许多工作都是自动完成的,例如读取每个输入行.字段分割. awk工作原理 awk一次 ...

  5. qt5.10.1编译记录

    qt版本更新比较快,不知道选哪个版本合适,故选择一个较新版本的. 平台imx6    +    linux4.1.16   +   qt5.10.1 采用明远智睿提供的编译器:fsl-imx-fb-g ...

  6. Gold Balanced Lineup POJ - 3274

    Description Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been abl ...

  7. is 和 == 的区别,utf和gbk的转换,join用法

    is 和 == 的区别 # is 比较的是内存地址 # == 比较的是值 a = 'alex' b = 'alex' #int,str(小数据池)会被缓存,为了节约内存 print(id(a),id( ...

  8. SpringMVC---四大注解

    SpringMVC四大注解 Component 通用标注,在不清楚使用哪个注解的时候,可以使用Component通用注解 Controller 标注web请求控制器 Service 标注Service ...

  9. sql查询作业答案

    sql查询作业答案   阅读目录 一 题目 二 答案 一 题目 1.查询所有的课程的名称以及对应的任课老师姓名 2.查询学生表中男女生各有多少人 3.查询物理成绩等于100的学生的姓名 4.查询平均成 ...

  10. hadoop中节点上的nodemanager一直启动不起来

    当我们启动Hadoop集群的时候,发现有一台机器的nodemanager启动后自动关闭, 查看日志的时候发现有错误:yarn-root-nodemanager-log 解决办法: netstat  a ...