js文件下载插件介绍和使用方法 download.js(转)

Posted 2021-02-03 gynstrive

转：https://blog.csdn.net/silence_pinot/article/details/81018452

知识点引用来自于: http://danml.com/download.html

可以直接传下载地址

使用 download(this.logUrl)

在前端想要生成txt或者其他格式文件来保存一些数据，或者在数据请求服务器成功后想要将数据生成文件并下载，这些需求还是比较多的，这里使用到的download.js。既可以满足这些需求。

第一步：下载
1.下载可以在官网上进行下载 原网址:download2.js
2.也可以使用我上传的资源(下载与上述官网) 免费哦！ 下载

第二步：引用
1.将下载的文件放在项目中，并使用 <script src="./download2.js"></script> 进行引用 (速度快)
2.使用网络引用 <script src="http://danml.com/js/download2.js"></script>

第三步：开始使用

//生成一个txt的文件，讲字符串变量 str 的内容放在里面，并完成下载
var str = "hello world可以中文吗？答案：可以的";
download(str, "Text.txt", "text/plain");

//也将生成一个txt文件，和上面的结果是一摸一样
str = "data:text/plain,hello%20world";
download(str, "dlDataUrlText.txt", "text/plain");


//将数组或者json对象写入到文件中
var debug = {hello : "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)]);
download(blob, "dlTextBlob.txt", "text/plain");

var str= "hello world", arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
    arr[b]=a.charCodeAt();
});
download( arr, "textUInt8Array.txt", "text/plain" );

  

//将html页面中的一部分生成单独的 html文档
download(document.body.outerHTML, "dlHTML.html", "text/html");



//给字符串添加标签，或者html片段直接给方法，将会生成对应内容的文件
download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");



 //将ajax查询回来的结果，赋值给文件，并下载
$.ajax({
    url: "/download.html",
    success: download.bind(true, "text/html", "dlAjaxCallback.html")
});



//将图片的base64装入到图片中并下载。
download("data:image/gif;base64,R0lGODlhRgAVAIcAAOfn5+/v7/f39////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAAAAP8ALAAAAABGABUAAAj/AAEIHAgggMGDCAkSRMgwgEKBDRM+LBjRoEKDAjJq1GhxIMaNGzt6DAAypMORJTmeLKhxgMuXKiGSzPgSZsaVMwXUdBmTYsudKjHuBCoAIc2hMBnqRMqz6MGjTJ0KZcrz5EyqA276xJrVKlSkWqdGLQpxKVWyW8+iJcl1LVu1XttafTs2Lla3ZqNavAo37dm9X4eGFQtWKt+6T+8aDkxUqWKjeQUvfvw0MtHJcCtTJiwZsmLMiD9uplvY82jLNW9qzsy58WrWpDu/Lp0YNmPXrVMvRm3T6GneSX3bBt5VeOjDemfLFv1XOW7kncvKdZi7t/S7e2M3LkscLcvH3LF7HwSuVeZtjuPPe2d+GefPrD1RpnS6MGdJkebn4/+oMSAAOw==", "dlDataUrlBin.gif", "image/gif");



//使用xhr获取本域名下文件，并封装到文件进行下载。这里的前提是xhr访问的文件必须和该程序执行在同一域名下，
//否则会报跨域的问题。比如此程序执行在localhost下面，而这里的访问地址使用的是http://danml.com，就会访问不成功。
    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();

  

扩展：还可以使用文件上传再下载进行测试。

<input id="file" type="file" onchange="download(this.files[0], this.files[0].name, this.files[0].type)">
---------------------
作者：silence_pinot
来源：CSDN
原文：https://blog.csdn.net/silence_pinot/article/details/81018452
版权声明：本文为博主原创文章，转载请附上博文链接！