快捷導(dǎo)航

javascript使用Blob對象實現(xiàn)的下載文件操作示例

更新時間：2020年04月18日 12:54:00 作者：harmsworth2016

這篇文章主要介紹了javascript使用Blob對象實現(xiàn)的下載文件操作,結(jié)合實例形式分析了javascript使用Blob對象下載文件相關(guān)原理、操作技巧與注意事項,需要的朋友可以參考下

本文實例講述了javascript使用Blob對象實現(xiàn)的下載文件操作。分享給大家供大家參考，具體如下：

Blob對象

前言
環(huán)境
操作
總結(jié)

Blob是一個類文件的不可變的原始數(shù)據(jù)對象，非javascript原生數(shù)據(jù)類型，F(xiàn)ile對象就是繼承自Blob對象，且在Blob的基礎(chǔ)上進(jìn)行擴(kuò)展，以便支持用戶系統(tǒng)上的文件。

前言

最近在做以post請求方式導(dǎo)出excel時，想到了可以使用Blob對象將后臺返回的輸出流以arraybuffer或blob的格式接收交給Blob處理，最后使用URL生成鏈接，供瀏覽器下載excel。

環(huán)境

vue2.x
webpack3.x
axios

操作

import axios from 'axios'
/**
* 從服務(wù)器下載excel
*/
function downloadExcel (settings) {
 const defaultOptions = {
  responseType: 'arraybuffer'
 }
 Object.assign(settings.options, defaultOptions)
 requestToResponse(settings).then(res => {
  const filename = decodeURI(res.headers['content-disposition'].split('filename=')[1])
  if ('download' in document.createElement('a')) {
   downloadFile(res.data, filename)
  } else {
   Message.error('瀏覽器不支持')
  }
 })
}
/**
* 發(fā)送http請求
* @param {Object} settings api參數(shù)
* @returns reponse
*/
function requestToResponse (settings) {
  const defaultParams = {
  timeout: 45000,
  headers: {
   'X-Requested-With': 'XMLHttpRequest',
   'Content-Type': 'application/json'
  },
  responseType: 'json',
  method: 'POST'
 }
 Object.assign(defaultParams, settings)
  return new Promise((resolve, reject) => {
  axios(defaultParams).then(res => {
   resolve(res)
  }).catch(err => {
   reject(err)
  })
 })
}
/**
* blob下載（兼容IE）
* @param {String} content 文件內(nèi)容
* @param {String} filename 文件名
*/
function downloadFile (content, filename) {
 const blob = new Blob([content])
 // IE
 if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveOrOpenBlob(blob, filename)
 } else {
  imatateDownloadByA(window.URL.createObjectURL(blob), filename)
 }
}
/**
* 通過a標(biāo)簽?zāi)M下載
* @param {String} href
* @param {String} filename
*/
function imatateDownloadByA (href, filename) {
 const a = document.createElement('a')
 a.download = filename
 a.style.display = 'none'
 a.href = href
 document.body.appendChild(a)
 a.click()
 a.remove()
 window.URL.revokeObjectURL(href)
}

// 下載excel
downloadExcel({
  url: '/default/excel/export',
  responseType: 'arraybuffer'
})

responseType設(shè)置為arraybuffer
在這里插入圖片描述
responseTyp設(shè)置成blob

不設(shè)置responseType，出現(xiàn)亂碼

若引入mockjs，其攔截響應(yīng)，重置了responseType，會出現(xiàn)亂碼