轉: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
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!