前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浏览器端用JS创建和下载文件 【原创】

浏览器端用JS创建和下载文件 【原创】

作者头像
CS逍遥剑仙
发布2018-04-28 12:00:20
2.3K0
发布2018-04-28 12:00:20
举报
文章被收录于专栏:禅林阆苑

浏览器端用JS创建和下载文件

Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

目录导航

  • 浏览器端用JS创建和下载文件
    • 1 需求
    • 2 解决方案
      • 2.1 下载取代加载:H5标签属性
      • 2.2 生成文件:DataURI
    • 3 改进方案

1 需求

前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载

2 解决方案

2.1 下载取代加载:H5标签属性

HTML5a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”)

2.2 生成文件:DataURI

用js将内容生成文件可以仿照图片 DataURI 的方式

代码语言:javascript
复制
<img src=”data:image/gif;base64,R0lGOXXXXX">

封装成一个下载方法

代码语言:javascript
复制
function downloadFile(aLink, fileName, content){
    aLink.download = fileName;
    aLink.href = "data:text/plain," + content;
}

调用 downloadFile 后,用户点击链接触发浏览器下载

3 改进方案

进一步放宽条件

  • 取消下载类型限制
  • 取消点击过程,直接下载

解决文件类型的问题,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过inputtype=file选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型

解决类型限制:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

文件自动下载:构建UI点击事件,再自动触发

代码语言:javascript
复制
function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

调用downloadFile,文件自动下载

【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 浏览器端用JS创建和下载文件 【原创】

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-06-24分,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 浏览器端用JS创建和下载文件
    • 目录导航
      • 1 需求
        • 2 解决方案
          • 2.1 下载取代加载:H5标签属性
          • 2.2 生成文件:DataURI
        • 3 改进方案
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档