JavaScript 文件下载解决方案-download.js

官方网站：http://danml.com/download.html

下载地址：http://danml.com/js/download2.js

环境测试

手机QQ：通过

华为手机浏览器：通过

小米手机浏览器：通过

Chrome(含移动端)：通过

Firefox(含移动端)：通过

Edge：通过

微信：未通过，待确认

简单使用

download(data, strFileName, strMimeType);

data: 要下载的数据，可以是 Blob、文件、字符串、URL
strFileName: 下载时指定文件名称
strMimeType：文件的MIME类型，可选。有利于向用户提供友好的信息

下载文字

download("我是文字", "text.txt", "text/plain");

下载html

download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");

下载data:二进制数据

download("data:image/gif;base64,R0lGODlhRgAVAIcAAOfn5+/v7/f39yH5BAAAAP8ALAAAAABGABUAAAj/AAEIHAgggMGDCAkSRMgwgEKBDRM+LBjRoEKDAjJq1GhxIMaNGzt6DAAypMORJTmeLKhxgMuXKiGSzPgSZsaVMwXUdBmTYsudKjHuBCoAIc2hMBnqRMqz6MGjTJ0KZcrz5EyqA276xJrVKlSkWqdGLQpxKVWyW8+iJcl1LVu1XttafTs2Lla3ZqNavAo37dm9X4eGFQtWKt+6T+8aDkxUqWKjeQUvfvw0MtHJcCtTJiwZsmLMiD9uplvY82jLNW9qzsy58WrWpDu/Lp0YNmPXrVMvRm3T6GneSX3bBt5VeOjDemfLFv1XOW7kncvKdZi7t/S7e2M3LkscLcvH3LF7HwSuVeZtjuPPe2d+GefPrD1RpnS6MGdJkebn4/+oMSAAOw==", "dlDataUrlBin.gif", "image/gif");

下载ajax接口返回的数据

var x=new XMLHttpRequest();x.open("GET", "http://danml.com/wave2.gif", true);x.responseType = 'blob';x.onload=function(e){download(x.response, "dlBinAjax.gif", "image/gif" ); }x.send();

完整测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="http://danml.com/js/download2.js"></script>
</head>
<body><button onclick="downloadText()">下载文字</button><br><button onclick="downloadHtml()">下载HTML</button><br><button onclick="downloadBinary()">下载data:二进制数据</button><br><button onclick="downloadFromAjax()">从ajax接口下载</button><br>
</body>
<script>function downloadText() {download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");}function downloadHtml() {download(document.body.outerHTML, "dlHTML.html", "text/html");}function downloadBinary() {download("data:image/gif;base64,R0lGODlhRgAVAIcAAOfn5+/v7/f39yH5BAAAAP8ALAAAAABGABUAAAj/AAEIHAgggMGDCAkSRMgwgEKBDRM+LBjRoEKDAjJq1GhxIMaNGzt6DAAypMORJTmeLKhxgMuXKiGSzPgSZsaVMwXUdBmTYsudKjHuBCoAIc2hMBnqRMqz6MGjTJ0KZcrz5EyqA276xJrVKlSkWqdGLQpxKVWyW8+iJcl1LVu1XttafTs2Lla3ZqNavAo37dm9X4eGFQtWKt+6T+8aDkxUqWKjeQUvfvw0MtHJcCtTJiwZsmLMiD9uplvY82jLNW9qzsy58WrWpDu/Lp0YNmPXrVMvRm3T6GneSX3bBt5VeOjDemfLFv1XOW7kncvKdZi7t/S7e2M3LkscLcvH3LF7HwSuVeZtjuPPe2d+GefPrD1RpnS6MGdJkebn4/+oMSAAOw==", "dlDataUrlBin.gif", "image/gif");}function downloadFromAjax() {var x=new XMLHttpRequest();x.open("GET", "http://39.107.120.250/tt.jpg", true); // 注意跨域问题dx.responseType = 'blob';x.onload=function(e){download(x.response, "dlBinAjax.gif", "image/jpg" ); }x.send();}</script>
</html>

JavaScript 文件下载解决方案-download.js相关推荐

js下载图片、js下载文件、js文件下载插件介绍和使用方法 download.js
知识点引用来自于 http://danml.com/download.html 在前端想要生成txt或者其他格式文件来保存一些数据,或者在数据请求服务器成功后想要将数据生成文件并下载,这些需求还是比较 ...
javascript高精度计算解决方案
首先解决精度最便捷的方式: x为要做精度处理的数值,先将x放大10000倍,再四舍五入,在除以10000倍. Math.round(x*10000)/10000 (注意:这里乘的倍数和你要保留的小数位 ...
js前端下载文件，利用download.js或者，纯js下载文件，图片，视频，pdf等
目前,我在百度上,找到了三种方式,下载第一种这个方法,用的是FileReader然后readAsDataURL,我自己测试,会比方法二,下载速度要快一点下面的代码段,可以替换,方法三种 down ...
JAVASCRIPT、JSP、JS有什么区别和联系
JAVASCRIPT.JSP.JS有什么区别和联系 js是javascript的缩写.以下是JSP与JS的区别和联系: 名字:JS:JavaScriptJSP:Java Server Pages 执行 ...
html动态加载js方法,如何通过JavaScript动态加载js
在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该方法比较简单,具体实例详见代码: 文件1:demo.js fun ...
【翻译】HTML5开发——轻量级JSON存储解决方案Lawnchair.js
[翻译]HTML5开发--轻量级JSON存储解决方案Lawnchair.js 参考文章: (1)[翻译]HTML5开发--轻量级JSON存储解决方案Lawnchair.js (2)https://ww ...
如何通过JavaScript动态加载js
在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载.于是,我们有了通过js动态加 ...
JavaScript动态加载js文件
/********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...
小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容二.JS基础语法 1.代码书写位置 2.变量 ...

JavaScript 文件下载解决方案-download.js

环境测试

简单使用

下载文字

下载html

下载data:二进制数据

下载ajax接口返回的数据

完整测试代码

JavaScript 文件下载解决方案-download.js相关推荐

最新文章

热门文章