1.封裝一個(gè)可以打開各種文件格式的js文件? ? getType.js

// 根據(jù)文件路徑,返回bole>mime的對(duì)應(yīng)類型// 如果不存在,則返回 undefinedexport function getMimeType(filePath){console.log(filePath)// 如果文件傳入的參數(shù)為空,則直接返回 nullif(filePath == '' || filePath == null || filePath == undefined){return null;}// 獲取文件類型的下標(biāo)var index = filePath.lastIndexOf(".");// 獲取后綴var ext = filePath.substr(index + 1);// mime類型對(duì)象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? 是對(duì)于所有下載接口封裝并且在新窗口打開

//文件類型 import {getMimeType } from '@/getType/getType' //接口 import {downloadFile } from '@/api/deviceManagement/deviceManagement' //頁(yè)面?zhèn)鲄?export function fileDownload(filePath, annexName, that) {var getMimeTypes = getMimeType(filePath)return downloadFile({filepath: filePath,filename:annexName}).then((res) => {console.log(res) //針對(duì)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 { //頁(yè)面表格上的加載動(dòng)畫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 頁(yè)面

<a-row class="outBorder"><a-row class="outBorder1" style="text-align: left" id="xgfj"><a-col :span="24" class="inBorder"> 相關(guān)附件</a-col></a-row><s-table ref="tableTwo" size="default" :rowKey="(record) => record.id" :columns="columnsTwo" :data="loadDataTwo"><span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span><span slot="action" slot-scope="text, record"><span><a @click="download(record)">預(yù)覽</a></span></span></s-table></a-row>

引用fileAbout.js? 文件? 用封裝好的fileDownload

在方法里寫入? 就可以了?

總結(jié)

以上是生活随笔為你收集整理的ant design vue之 下载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。