ant design vue之 下载

1.封装一个可以打开各种文件格式的js文件    getType.js

// 根据文件路径,返回bole>mime的对应类型
	 // 如果不存在,则返回 undefined
	export function getMimeType(filePath){
		console.log(filePath)
		// 如果文件传入的参数为空,则直接返回 null
		if(filePath == '' || filePath == null || filePath == undefined){
			return null;
		}
		// 获取文件类型的下标
		var index = filePath.lastIndexOf(".");
		// 获取后缀
		var ext = filePath.substr(index + 1);
	 
		 // mime类型对象
		 var mimeTypeObj = {
			gif:'image/gif',
			jpeg:'image/jpeg',
			jpg:'image/jpeg',
			png:'image/png',
			bmp:'image/bmp',
			pdf:'application/pdf',
			txt:'text/plain',
			doc:'application/msword',
			docx:'application/msword',
			ppt:'application/vnd.ms-powerpoint',
			pptx:'application/vnd.openxmlformats-officedocument.presentationml.presentation',
			mp3:'audio/mpeg',
			xls:'application/vnd.ms-excel',
			xlsx:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
			xml:'text/xml'
		 }
		var returnType = mimeTypeObj[ext];
		console.log(returnType)
		if(returnType){
			return returnType + ';charset=UTF-8';
		}
		return null;
	 }

2.fileAbout.js  是对于所有下载接口封装并且在新窗口打开

//文件类型
import {
  getMimeType
} from '@/getType/getType'
//接口
import {
  downloadFile
} from '@/api/deviceManagement/deviceManagement'
//页面传参
export function fileDownload(filePath, annexName, that) {
  var getMimeTypes = getMimeType(filePath)
  return downloadFile({
    filepath: filePath,
    filename:annexName
  }).then((res) => {
    console.log(res)
//针对IE版本
    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      const blob = new Blob([res], {
        type: getMimeTypes
      });
      const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
        ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
        ieEDGE = navigator.userAgent.match(/Edge/g),
        ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
      if (ie && ieVer < 10) {
        this.message.error('No blobs on IE<10');
        return;
      }
      if (ieVer > -1) {
        window.navigator.msSaveBlob(blob, annexName)
        that.spinningLoading = false
      }
    } else {
//页面表格上的加载动画
      if (that.spinningLoading) {
        that.spinningLoading = false
      } else {
        that.loadingD = false
      }
      var blob = new Blob([res], {
        type: getMimeTypes
      })
//打开新的窗口
      var link = document.createElement('a')
      link.setAttribute('target', '_blank')
      // link.setAttribute('download', annexName)
      link.href = window.URL.createObjectURL(blob)
      link.click()
    }

  })
}

3.在vue 页面

 
                
                   相关附件
                
                
                  {{ index + 1 }}
                  
                    
                    预览
                    
                  
                
              

引用fileAbout.js  文件  用封装好的fileDownload

在方法里写入  就可以了