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类型
扩展名文件类型
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.docapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.pptapplication/vnd.ms-powerpoint
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
.pdfapplication/pdf
.vsdapplication/vnd.visio
.vsdxapplication/vnd.ms-visio.drawing
.zipapplication/zip
.csstext/css
.jstext/javascript
.jsonapplication/json
.htmltext/html
.xmltext/xml
.pytext/plain
.txttext/plain
.jpgimage/jpeg
.jpegimage/jpeg
.pngimage/png
.icoimage/x-icon
.svgimage/svg+xml
.gifimage/gif
.mp3audio/mpeg
.mp4video/mp4
.exeapplication/x-msdownload
.apkapplication/vnd.android.package-archive

版权声明:本文为qq_43576662原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。