js 文件保存下載

  1. ajax下載文件
    下載文件最簡(jiǎn)單的是用get方法配合前端的a標(biāo)簽,但是如果是post方法或者是請(qǐng)求需要加頭信息就需要用ajax請(qǐng)求下載了,代碼如下:
$.get(url, function (data) {

       console.log(typeof(data))
       // 文本文件
       // var blob = new Blob([data],{type:"text/plain;charset=UTF-8"})
       // 文件流
       var blob = new Blob([要保存的文件流], { type: 'application/octet-stream' }),
      // json文件 縮進(jìn)2
      // var blob = new Blob([JSON.stringify(jsonObj, null, 2)], {type : 'application/json'});
       downloadFile(blob, 'fileName.txt');
   });

function createFile(value, type, name) {
    var blob;
    if (typeof window.Blob == "function") {
      blob = new Blob([value], { type: type });
    } else {
      var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
      var bb = new BlobBuilder();
      bb.append(value);
      blob = bb.getBlob(type);
    }
    blob.name = name;
    return blob;
  }

  function downloadFile(blob, name) {
    if (navigator.msSaveBlob) {
      navigator.msSaveBlob(blob, name);
      return;
    } 
    var WURL = window.URL || window.webkitURL;
    // 轉(zhuǎn)為url:"blob:null/4b27d1aa-d7dc-4c91-a6f8-60f0a1b26134"
    var bloburl = WURL.createObjectURL(blob);
    var anchor = document.createElement("a");
    if ('download' in anchor) {
      anchor.style.visibility = "hidden";
      anchor.href = bloburl;
      anchor.download = name;
      document.body.appendChild(anchor);
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, true);
      anchor.dispatchEvent(evt);
      document.body.removeChild(anchor);
      //  釋放對(duì)象
      WURL.revokeObjectURL(bloburl);
    } else {
      location.href = bloburl;
    }
  }
  1. base64 blob bloburl
// base64轉(zhuǎn)字符串
var base64Str = window.atob('str');
// 字符串轉(zhuǎn)base64
var str = window.btoa(base64Str);
/** 
* base64 轉(zhuǎn) blob 對(duì)象 
 */  
function dataURItoBlob(dataURI) {
    // 截取URI的base64字符串 轉(zhuǎn) string  
    var byteString = atob(dataURI.split(',')[1]);  
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
    var ab = new ArrayBuffer(byteString.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < byteString.length; i++) {  
        ia[i] = byteString.charCodeAt(i);  
    }  
    return new Blob([ia], {type: mimeString});  
}

function fileToBase64(file) {
  if (window.FileReader) { 
    var reader = new FileReader();
    // FileReader 的api 用法
    reader.readAsDataURL (file1);
    // result為帶 base64的URi: "data:application/json;base64,ewogICJnb29kIjogImdvb2RieWUiLAogICJoaSI6ICJoZWxsbyIKfQ=="
    return reader.result;
  } else { 
    alert("Not supported by your browser!"); 
  }
  
  return null;
}
  1. FileReader
方法名 參數(shù) 描述
abort none 中斷讀取
readAsBinaryString file 將文件讀取為二進(jìn)制碼
readAsDataURL file 將文件讀取為 DataURL
readAsText file, [encoding] 將文件讀取為文本
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,780評(píng)論 1 45
  • 前端無(wú)法像原生APP一樣直接操作本地文件,否則的話打開個(gè)網(wǎng)頁(yè)就能把用戶電腦上的文件偷光了,所以需要通過(guò)用戶觸發(fā),用...
    雷波_viho閱讀 879評(píng)論 0 1
  • 27、移動(dòng)端響應(yīng)式布局開發(fā) 響應(yīng)式布局開發(fā) 1、什么是響應(yīng)式布局開發(fā)?把我們開發(fā)完成的產(chǎn)品,能夠讓其適配不同的設(shè)備...
    萌妹撒閱讀 1,195評(píng)論 0 0
  • 在javascript的世界里無(wú)法處理二進(jìn)制數(shù)據(jù),如果需要處理,只能使用charCodeAt()方法,一個(gè)個(gè)字節(jié)地...
    我是上帝可愛(ài)多閱讀 944評(píng)論 0 4
  • 有時(shí)候我在想 愛(ài)我的人和我愛(ài)的人都結(jié)婚了 我為什么不結(jié)婚? 有時(shí)候我在想 曾經(jīng)你以為的 那些條條框框 都在你遇到了...
    此刻花開有香氣閱讀 584評(píng)論 2 3

友情鏈接更多精彩內(nèi)容