后臺返回blob二進(jìn)制文件认臊,前端實(shí)現(xiàn)下載文件

npm install qs

/**
 * 這里是ajax的通用訪問接口處理
 */
import axios from 'axios';
import Qs from 'qs';
import Message from './msgbox'; //封裝的message消息組件

const showMessage = (message, type = 'error') => {
  Message({
    type: 'error',
    message: message
  });
};

export default {
  /**
   * 封裝導(dǎo)出Excel文件post請求
   * @param url  下載接口url
   * @param data 參數(shù)
   * @returns {Promise}
   */
  download(url, options = {}) {
    this.filterEmptyKey(options, false);
    return new Promise((resolve, reject) => {
      axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
      axios({
        method: 'post',
        url: url, // 請求地址
        data: options, // 參數(shù)
        responseType: 'blob' // 表明返回服務(wù)器返回的數(shù)據(jù)類型
      }).then(
        response => {
          let blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          });
          //判斷類型是否返回json圃庭,返回json時報(bào)錯
          if (response.data.type !== 'application/vnd.ms-excel') {
            let reader = new FileReader();
            reader.onload = e => {
              let result = JSON.parse(e.target.result);
              if (result) {
                showMessage(result.errorMessage);
                return reject(result);
              }
            };
            reader.readAsText(blob);
          } else {
            resolve(response.data);
            let now = new Date();
            let fileName = now.getTime() + '.xlsx';
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName);
            } else {
              let link = document.createElement('a');
              link.href = window.URL.createObjectURL(blob);
              link.download = fileName;
              link.click();
              //釋放內(nèi)存
              window.URL.revokeObjectURL(link.href);
            }
          }
        },
        err => {
          reject(err);
        }
      );
    });
  },

  /**
   * 服務(wù)端接口empty字符串跟null返回的結(jié)果不同,過濾掉empty字符串
   * @param params
   * @param emptyString 是否過濾空字符串
   */
  filterEmptyKey(params, emptyString) {
    Object.keys(params).forEach(key => {
      if (params[key] === null || (emptyString && params[key] === '')) {
        delete params[key];
      }
    });
  },

  /**
   * 封裝導(dǎo)出Excal文件get請求
   * @param url  下載接口url
   * @param data 參數(shù)
   * @returns {Promise}
   */
  getDownload(url, options = {}) {
    this.filterEmptyKey(options, true);
    options = Qs.stringify(options, { arrayFormat: 'repeat' });
    return new Promise((resolve, reject) => {
      axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
      axios({
        method: 'get',
        url: url + '?' + options, // 請求地址
        responseType: 'blob' // 表明返回服務(wù)器返回的數(shù)據(jù)類型
      }).then(
        response => {
          let blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          });
          //判斷類型是否返回json失晴,返回json時報(bào)錯
          if (response.data.type !== 'application/vnd.ms-excel') {
            let reader = new FileReader();
            reader.onload = e => {
              let result = JSON.parse(e.target.result);
              if (result) {
                showMessage(result.errorMessage);
                return reject(result);
              }
            };
            reader.readAsText(blob);
          } else {
            //正確時導(dǎo)出文件
            resolve(response.data);
            let now = new Date();
            let fileName = now.getTime() + '.xlsx';
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName);
            } else {
              let link = document.createElement('a');
              link.href = window.URL.createObjectURL(blob);
              link.download = fileName;
              link.click();
              //釋放內(nèi)存
              window.URL.revokeObjectURL(link.href);
            }
          }
        },
        err => {
          reject(err);
        }
      );
    });
  }
};

//使用
exportExcel
        .download(api地址, 穿參數(shù)(post))
        .then(res => {
          this.$message({
            message: '導(dǎo)出成功剧腻,正在下載',
            type: 'success'
          });
        })
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市师坎,隨后出現(xiàn)的幾起案子恕酸,更是在濱河造成了極大的恐慌,老刑警劉巖胯陋,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蕊温,死亡現(xiàn)場離奇詭異,居然都是意外死亡遏乔,警方通過查閱死者的電腦和手機(jī)义矛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盟萨,“玉大人凉翻,你說我怎么就攤上這事∧砑ぃ” “怎么了制轰?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長胞谭。 經(jīng)常有香客問我垃杖,道長,這世上最難降的妖魔是什么丈屹? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任调俘,我火速辦了婚禮,結(jié)果婚禮上旺垒,老公的妹妹穿的比我還像新娘彩库。我一直安慰自己,他們只是感情好先蒋,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布骇钦。 她就那樣靜靜地躺著,像睡著了一般竞漾。 火紅的嫁衣襯著肌膚如雪司忱。 梳的紋絲不亂的頭發(fā)上皇忿,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機(jī)與錄音坦仍,去河邊找鬼。 笑死叨襟,一個胖子當(dāng)著我的面吹牛繁扎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播糊闽,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼梳玫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了右犹?” 一聲冷哼從身側(cè)響起提澎,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎念链,沒想到半個月后盼忌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡掂墓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年谦纱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片君编。...
    茶點(diǎn)故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡跨嘉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吃嘿,到底是詐尸還是另有隱情祠乃,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布兑燥,位于F島的核電站亮瓷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏贪嫂。R本人自食惡果不足惜寺庄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望力崇。 院中可真熱鬧斗塘,春花似錦、人聲如沸亮靴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茧吊。三九已至贞岭,卻和暖如春八毯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瞄桨。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工话速, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留髓削,地道東北人朴恳。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓肾档,卻偏偏與公主長得像始藕,于是被迫代替她去往敵國和親框往。 傳聞我的和親對象是個殘疾皇子祸憋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評論 2 354

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