axios调用后端下载接口(在请求体中加上responseType: "blob")
export const fileDownload = (data) => request({ method: "post", url: "/heritage/fileDownload", responseType: "blob", data, });
把后端返回的二进制流数据转换成一个blob对象,再去进行下载;
1.封装下载函数
// data: 接口返回的二进制流数据// fileName:自定义下载完成后的文件名// fileType:要下载的文件类型downloadFile(data, fileName, fileType) { let blob = new Blob([data], { type: `${fileType};charset=utf-8`});// type指定下载文件的类型 let downloadElement = document.createElement("a"); let href = window.URL.createObjectURL(blob); downloadElement.href = href; downloadElement.download = fileName; document.body.appendChild(downloadElement); downloadElement.click(); document.body.removeChild(downloadElement); window.URL.revokeObjectURL(href);}
2. 当后端下载接口请求完成后,调用1中的下载函数并传入对应参数;
new Blob的参数type类型:async courseDownload() { // 调用后端接口 const res = await fileDownload(); // 此处的fileType可以动态获取响应头中对应的文件名称 const filename = "测试文件"; // 自定义下载文件名称 // 此处的fileType可以动态获取响应头中对应的文件类型 const fileType = "application/zip" // 下载zip格式的文件 this.downloadFile(res, filename, fileType);},
//作者:夹板儿孩//链接:https://www.jianshu.com/p/6896ade6299b// 全面的类型:https://www.iana.org/assignments/media-types/media-types.xhtml123 application/vnd.lotus-1-2-33gp video/3gppaab application/x-authoware-binaam application/x-authoware-mapaas application/x-authoware-segai application/postscriptaif audio/x-aiffaifc audio/x-aiffaiff audio/x-aiffals audio/X-Alpha5amc application/x-mpegani application/octet-streamasc text/plainasd application/astoundasf video/x-ms-asfasn application/astoundasp application/x-asapasx video/x-ms-asfau audio/basicavb application/octet-streamavi video/x-msvideoawb audio/amr-wbbcpio application/x-bcpiobin application/octet-streambld application/bldbld2 application/bld2bmp application/x-MS-bmpbpk application/octet-streambz2 application/x-bzip2cal image/x-calsccn application/x-cnccco application/x-cocoacdf application/x-netcdfcgi magnus-internal/cgichat application/x-chatclass application/octet-streamclp application/x-msclipcmx application/x-cmxco application/x-cult3d-objectcod image/cis-codcpio application/x-cpiocpt application/mac-compactprocrd application/x-mscardfilecsh application/x-cshcsm chemical/x-csmlcsml chemical/x-csmlcss text/csscur application/octet-streamdcm x-lml/x-evmdcr application/x-directordcx image/x-dcxdhtml text/htmldir application/x-directordll application/octet-streamdmg application/octet-streamdms application/octet-streamdoc application/msworddot application/x-dotdvi application/x-dvidwf drawing/x-dwfdwg application/x-autocaddxf application/x-autocaddxr application/x-directorebk application/x-expandedbookemb chemical/x-embl-dl-nucleotideembl chemical/x-embl-dl-nucleotideeps application/postscripteri image/x-eries audio/echospeechesl audio/echospeechetc application/x-earthtimeetx text/x-setextevm x-lml/x-evmevy application/x-envoyexe application/octet-streamfh4 image/x-freehandfh5 image/x-freehandfhc image/x-freehandfif image/fiffm application/x-makerfpx image/x-fpxfvi video/isivideogau chemical/x-gaussian-inputgca application/x-gca-compressedgdb x-lml/x-gdbgif image/gifgps application/x-gpsgtar application/x-gtargz application/x-gziphdf application/x-hdfhdm text/x-hdmlhdml text/x-hdmlhlp application/winhlphqx application/mac-binhex40htm text/htmlhtml text/htmlhts text/htmlice x-conference/x-cooltalkico application/octet-streamief image/iefifm image/gififs image/ifsimy audio/melodyins application/x-NET-Installips application/x-ipscriptipx application/x-ipixit audio/x-moditz audio/x-modivr i-world/i-vrmlj2k image/j2kjad text/vnd.sun.j2me.app-descriptorjam application/x-jamjar application/java-archivejnlp application/x-java-jnlp-filejpe image/jpegjpeg image/jpegjpg image/jpegjpz image/jpegjs application/x-javascriptjwc application/jwckjx application/x-kjxlak x-lml/x-laklatex application/x-latexlcc application/fastmanlcl application/x-digitallocalcr application/x-digitallocalgh application/lghlha application/octet-streamlml x-lml/x-lmllmlpack x-lml/x-lmlpacklsf video/x-ms-asflsx video/x-ms-asflzh application/x-lzhm13 application/x-msmediaviewm14 application/x-msmediaviewm15 audio/x-modm3u audio/x-mpegurlm3url audio/x-mpegurlma1 audio/ma1ma2 audio/ma2ma3 audio/ma3ma5 audio/ma5man application/x-troff-manmap magnus-internal/imagemapmbd application/mbedletmct application/x-mascotmdb application/x-msaccessmdz audio/x-modme application/x-troff-memel text/x-vmelmi application/x-mifmid audio/midimidi audio/midimif application/x-mifmil image/x-calsmio audio/x-miommf application/x-skt-lbsmng video/x-mngmny application/x-msmoneymoc application/x-mochamocha application/x-mochamod audio/x-modmof application/x-yumekaramol chemical/x-mdl-molfilemop chemical/x-mopac-inputmov video/quicktimemovie video/x-sgi-moviemp2 audio/x-mpegmp3 audio/x-mpegmp4 video/mp4mpc application/vnd.mpohun.certificatempe video/mpegmpeg video/mpegmpg video/mpegmpg4 video/mp4mpga audio/mpegmpn application/vnd.mophun.applicationmpp application/vnd.ms-projectmps application/x-mapservermrl text/x-mrmlmrm application/x-mrmms application/x-troff-msmts application/metastreammtx application/metastreammtz application/metastreammzv application/metastreamnar application/zipnbmp image/nbmpnc application/x-netcdfndb x-lml/x-ndbndwn application/ndwnnif application/x-nifnmz application/x-screamnokia-op-logo image/vnd.nok-oplogo-colornpx application/x-netfpxnsnd audio/nsndnva application/x-neva1oda application/odaoom application/x-AtlasMate-Pluginpac audio/x-pacpae audio/x-epacpan application/x-panpbm image/x-portable-bitmappcx image/x-pcxpda image/x-pdapdb chemical/x-pdbpdf application/pdfpfr application/font-tdpfrpgm image/x-portable-graymappict image/x-pictpm application/x-perlpmd application/x-pmdpng image/pngpnm image/x-portable-anymappnz image/pngpot application/vnd.ms-powerpointppm image/x-portable-pixmappps application/vnd.ms-powerpointppt application/vnd.ms-powerpointpqf application/x-cprplayerpqi application/cprplayerprc application/x-prcproxy application/x-ns-proxy-autoconfigps application/postscriptptlk application/listenuppub application/x-mspublisherpvx video/x-pv-pvxqcp audio/vnd.qcelpqt video/quicktimeqti image/x-quicktimeqtif image/x-quicktimer3t text/vnd.rn-realtext3dra audio/x-pn-realaudioram audio/x-pn-realaudiorar application/x-rar-compressedras image/x-cmu-rasterrdf application/rdf+xmlrf image/vnd.rn-realflashrgb image/x-rgbrlf application/x-richlinkrm audio/x-pn-realaudiormf audio/x-rmfrmm audio/x-pn-realaudiormvb audio/x-pn-realaudiornx application/vnd.rn-realplayerroff application/x-troffrp image/vnd.rn-realpixrpm audio/x-pn-realaudio-pluginrt text/vnd.rn-realtextrte x-lml/x-gpsrtf application/rtfrtg application/metastreamrtx text/richtextrv video/vnd.rn-realvideorwc application/x-rogerwilcos3m audio/x-mods3z audio/x-modsca application/x-supercardscd application/x-msschedulesdf application/e-scoresea application/x-stuffitsgm text/x-sgmlsgml text/x-sgmlsh application/x-shshar application/x-sharshtml magnus-internal/parsed-htmlshw application/presentationssi6 image/si6si7 image/vnd.stiwap.sissi9 image/vnd.lgtwap.sissis application/vnd.symbian.installsit application/x-stuffitskd application/x-Koanskm application/x-Koanskp application/x-Koanskt application/x-Koanslc application/x-salsasmd audio/x-smdsmi application/smilsmil application/smilsmp application/studiomsmz audio/x-smdsnd audio/basicspc text/x-speechspl application/futuresplashspr application/x-spritesprite application/x-spritespt application/x-sptsrc application/x-wais-sourcestk application/hyperstudiostm audio/x-modsv4cpio application/x-sv4cpiosv4crc application/x-sv4crcsvf image/vndsvg image/svg-xmlsvh image/svhsvr x-world/x-svrswf application/x-shockwave-flashswfl application/x-shockwave-flasht application/x-trofftad application/octet-streamtalk text/x-speechtar application/x-tartaz application/x-tartbp application/x-timbuktutbt application/x-timbuktutcl application/x-tcltex application/x-textexi application/x-texinfotexinfo application/x-texinfotgz application/x-tarthm application/vnd.eri.thmtif image/tifftiff image/tifftki application/x-tkinedtkined application/x-tkinedtoc application/toctoy image/toytr application/x-trofftrk x-lml/x-gpstrm application/x-msterminaltsi audio/tsplayertsp application/dsptypetsv text/tab-separated-valuestsv text/tab-separated-valuesttf application/octet-streamttz application/t-timetxt text/plainult audio/x-modustar application/x-ustaruu application/x-uuencodeuue application/x-uuencodevcd application/x-cdlinkvcf text/x-vcardvdo video/vdovib audio/vibviv video/vivovivo video/vivovmd application/vocaltec-media-descvmf application/vocaltec-media-filevmi application/x-dreamcast-vms-infovms application/x-dreamcast-vmsvox audio/voxwarevqe audio/x-twinvq-pluginvqf audio/x-twinvqvql audio/x-twinvqvre x-world/x-vreamvrml x-world/x-vrmlvrt x-world/x-vrtvrw x-world/x-vreamvts workbook/formulaonewav audio/x-wavwax audio/x-ms-waxwbmp image/vnd.wap.wbmpweb application/vnd.xarawi image/waveletwis application/x-InstallShieldwm video/x-ms-wmwma audio/x-ms-wmawmd application/x-ms-wmdwmf application/x-msmetafilewml text/vnd.wap.wmlwmlc application/vnd.wap.wmlcwmls text/vnd.wap.wmlscriptwmlsc application/vnd.wap.wmlscriptcwmlscript text/vnd.wap.wmlscriptwmv audio/x-ms-wmvwmx video/x-ms-wmxwmz application/x-ms-wmzwpng image/x-up-wpngwpt x-lml/x-gpswri application/x-mswritewrl x-world/x-vrmlwrz x-world/x-vrmlws text/vnd.wap.wmlscriptwsc application/vnd.wap.wmlscriptcwv video/waveletwvx video/x-ms-wvxwxl application/x-wxlx-gzip application/x-gzipxar application/vnd.xaraxbm image/x-xbitmapxdm application/x-xdmaxdma application/x-xdmaxdw application/vnd.fujixerox.docuworksxht application/xhtml+xmlxhtm application/xhtml+xmlxhtml application/xhtml+xmlxla application/vnd.ms-excelxlc application/vnd.ms-excelxll application/x-excelxlm application/vnd.ms-excelxls application/vnd.ms-excelxlt application/vnd.ms-excelxlw application/vnd.ms-excelxm audio/x-modxml text/xmlxmz audio/x-modxpi application/x-xpinstallxpm image/x-xpixmapxsit text/xmlxsl text/xmlxul text/xulxwd image/x-xwindowdumpxyz chemical/x-pdbyz1 application/x-yz1z application/x-compresszac application/x-zaurus-zaczip application/zipogg application/oggaac audio/aac