new Blob下载文件流,并根据文件后缀动态匹配blob的type
需求:后端返回数据流,前端进行下载。
1.定义js文件,包含所有的blobType
export const blobType = {xls: 'application/vnd.ms-excel',xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',csv: 'text/csv',doc: 'application/msword',docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',pdf: 'application/pdf',ppt: 'application/vnd.ms-powerpoint',pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',png: 'image/png',gif: 'image/gif',jpeg: 'image/jpeg',jpg: 'image/jpeg',mp3: 'audio/mpeg',aac: 'audio/aac',html: 'text/html',css: 'text/css',js: 'text/javascript',json: 'application/json',abw: 'application/x-abiword',arc: 'application/x-freearc',avi: 'video/x-msvideo',azw: 'application/vnd.amazon.ebook',bin: 'application/octet-stream',bmp: 'image/bmp',bz: 'application/x-bzip',bz2: 'application/x-bzip2',csh: 'application/x-csh',eot: 'application/vnd.ms-fontobject',epub: 'application/epub+zip',htm: 'text/html',ico: 'image/vnd.microsoft.icon',ics: 'text/calendar',jar: 'application/java-archive',jsonld: 'application/ld+json',mid: 'audio/midi audio/x-midi',midi: 'audio/midi audio/x-midi',mjs: 'text/javascript',mpeg: 'video/mpeg',mpkg: 'application/vnd.apple.installer+xml',odp: 'application/vnd.oasis.opendocument.presentation',ods: 'application/vnd.oasis.opendocument.spreadsheet',odt: 'application/vnd.oasis.opendocument.text',oga: 'audio/ogg',ogv: 'video/ogg',ogx: 'application/ogg',otf: 'font/otf',rar: 'application/x-rar-compressed',rtf: 'application/rtf',sh: 'application/x-sh',svg: 'image/svg+xml',swf: 'application/x-shockwave-flash',tar: 'application/x-tar',tif: 'image/tiff',tiff: 'image/tiff',ttf: 'font/ttf',txt: 'text/plain',vsd: 'application/vnd.visio',wav: 'audio/wav',weba: 'audio/webm',webm: 'video/webm',webp: 'image/webp',woff: 'font/woff',woff2: 'font/woff2',xhtml: 'application/xhtml+xml',xml: 'text/xml',xul: 'application/vnd.mozilla.xul+xml',zip: 'application/zip',
}
2、在下载页面引入
import { blobType } from '../../assets/js/blobType'
3、下载使用
(请求和响应结构视自己情况而定,这里本人记录自己的开发过程)
this.axios.post('http://10.143.141.245:8990/api/attachment/download/v1',{fileId: 'a3d0b49e46b049bb9b21541731b85a74'},{ responseType: 'arraybuffer' }).then((res) => {if (res.status == 200) {let name = res.headers.filenamelet index = name.lastIndexOf('.')let content = res.datalet file_type = ''if (index !== -1) {file_type = name.substring(index + 1, name.length).toLowerCase()} else {this.$message.error('请检查文件格式')}let a = document.createElement('a')a.download = decodeURIComponent(name)a.style.display = 'none'let blob = new Blob([content], { type: blobType[file_type] })a.href = URL.createObjectURL(blob)document.body.appendChild(a)a.click()document.body.removeChild(a)}})