js文件下载功能（Blob文件流）

接下来举例的是excel文件的下载

• 核心方法

methods(){
	ExportXls(fileName) {
	  //请求后端的地址和参数
	  let url = '/exportXls'
	  let param = {}
	  //downFile为封装之后的axios请求方法
	  downFile(url, param).then((data) => {
        if (!data) {
          console.log("文件下载失败！")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], {type: 'application/vnd.ms-excel'}), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], {type: 'application/vnd.ms-excel'}))  //定义下载的链接
          let link = document.createElement('a')  //创建一个超链接元素
          link.style.display = 'none'   //隐藏该元素
          link.href = url  //创建下载的链接
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()  //点击下载
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
	}
}

• 下面整理了一些常用文件type类型

扩展名	文件类型
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation
.pdf	application/pdf
.vsd	application/vnd.visio
.vsdx	application/vnd.ms-visio.drawing
.zip	application/zip
.css	text/css
.js	text/javascript
.json	application/json
.html	text/html
.xml	text/xml
.py	text/plain
.txt	text/plain
.jpg	image/jpeg
.jpeg	image/jpeg
.png	image/png
.ico	image/x-icon
.svg	image/svg+xml
.gif	image/gif
.mp3	audio/mpeg
.mp4	video/mp4
.exe	application/x-msdownload
.apk	application/vnd.android.package-archive
.ttc	font/collection
.ttf	font/ttf