JavaScript使用Blob对象实现文件下载的操作示例

作者：半夏

时间：2026-10-23

本文详解如何利用JavaScript的Blob对象实现文件下载，重点解析在Post请求导出Excel时，axios的responseType需设为arraybuffer或blob以避免乱码。同时指出需关闭mockjs拦截，并提供了完整的Vue2+Webpack3环境下的代码实现与注意事项。

文章目录

本文通过具体实例，介绍如何在JavaScript中利用Blob对象完成文件下载操作，供读者参考学习。

Blob对象概述

前言
运行环境
具体操作步骤
总结

Blob是一种表示不可变原始数据的类文件对象，它并非JavaScript的原生数据类型。File对象继承自Blob，并在其基础上扩展，以支持对用户本地文件的访问与操作。

前言

近期在处理通过Post请求导出Excel的需求时，思路是利用Blob对象接收后台返回的输出流。具体做法是将响应数据以arraybuffer或blob格式接收，交由Blob处理，最后生成URL链接供浏览器执行下载。

运行环境

Vue 2.x
Webpack 3.x
Axios

具体操作步骤


import axios from 'axios'
/**
* 从服务器下载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('浏览器不支持')
  }
 })
}
/**
* 发送http请求
* @param {Object} settings api参数
* @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 文件内容
* @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标签模拟下载
* @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设置为arraybuffer。 Blob对象概述其次，也可将responseType设置为blob。若未设置responseType，下载的文件内容会出现乱码。此外，如果项目中引入了mockjs，其拦截响应并重置了responseType，同样会导致乱码问题。