導(dǎo)出后臺返回的excel文件流

概述: 大部分情況下屡拨,我們是直接訪問提供的download鏈接來直接下載文件只酥。但某些時候褥实,為了保證信息安全,可能需要提交token來驗證用戶信息裂允。

參考:js要怎么接收后端傳的excel文件流损离?jello chen的回答

jello chen的回答中,提供了兩種方法绝编。

第一種是通過的a標(biāo)簽直接下載:

  <a href="<你的返回流的Action路徑>" >下載</a>

轉(zhuǎn)化為js代碼:

      let elink = document.createElement('a');
      elink.download = "download.xls";
      elink.href = `${url}?token=${token}&${hash}`;
      elink.click();

第二種方法是通過XMLHttpRequest來實現(xiàn)的僻澎,代碼如下(有部分修改):

    <script type="text/javascript">
        function download(filename) {
            let oReq = new XMLHttpRequest();
            oReq.open("GET", "<你的返回流的Action路徑>", true);
            oReq.responseType = "blob";

            //  設(shè)置驗證密匙
            oReq.setRequestHeader("token",token);
            oReq.setRequestHeader("loginName",localStorage.getItem('username') || '');

            oReq.onload = function () {
                var content = oReq.response;
                var blob = new Blob([content]);

                //  創(chuàng)建a標(biāo)簽,下載處理過的文件流
                var elink = document.createElement('a');
                elink.download = filename;
                elink.href = URL.createObjectURL(blob);
                elink.click();
            };
            oReq.send();
        }
    </script>

然后將起轉(zhuǎn)化為fetch方式:

  let newOptions = {
      loginName: localStorage.getItem('username') || '',
      'Content-Type': 'application/form-data; charset=utf-8',
      token,
  }

  fetch("<你的返回流的Action路徑>", newOptions, { responseType: 'blob'})
  .then(response => {
      // 注意十饥,該處并非response.json()
      return response.blob();
  })
  .then(res => {
      var blob = new Blob([res]);
      let elink = document.createElement('a');

      elink.download = "download.xls";
      elink.href = URL.createObjectURL(blob);
      elink.click();
  })
  .catch(e => {
    console.log('error:' + e)
  })

因為沒有post方式的接口窟勃,所以沒有測試post的請求。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末绷跑,一起剝皮案震驚了整個濱河市拳恋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌砸捏,老刑警劉巖谬运,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異垦藏,居然都是意外死亡梆暖,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門掂骏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轰驳,“玉大人,你說我怎么就攤上這事弟灼〖督猓” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵田绑,是天一觀的道長勤哗。 經(jīng)常有香客問我,道長掩驱,這世上最難降的妖魔是什么芒划? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮欧穴,結(jié)果婚禮上民逼,老公的妹妹穿的比我還像新娘。我一直安慰自己涮帘,他們只是感情好拼苍,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著调缨,像睡著了一般映屋。 火紅的嫁衣襯著肌膚如雪苟鸯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天棚点,我揣著相機(jī)與錄音,去河邊找鬼湾蔓。 笑死瘫析,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的默责。 我是一名探鬼主播贬循,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼桃序!你這毒婦竟也來了杖虾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤媒熊,失蹤者是張志新(化名)和其女友劉穎奇适,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芦鳍,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嚷往,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了柠衅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片皮仁。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖菲宴,靈堂內(nèi)的尸體忽然破棺而出贷祈,到底是詐尸還是另有隱情,我是刑警寧澤喝峦,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布势誊,位于F島的核電站,受9級特大地震影響愈犹,放射性物質(zhì)發(fā)生泄漏键科。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一漩怎、第九天 我趴在偏房一處隱蔽的房頂上張望勋颖。 院中可真熱鬧,春花似錦勋锤、人聲如沸饭玲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茄厘。三九已至矮冬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間次哈,已是汗流浹背胎署。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留窑滞,地道東北人琼牧。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像哀卫,于是被迫代替她去往敵國和親巨坊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容