ant design vue之下载

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


// 根据文件路径,返回bole>mime的对应类型// 如果不存在,则返回 undefinedexport function getMimeType(filePath){console.log(filePath)// 如果文件传入的参数为空,则直接返回 nullif(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 页面

 <a-row class="outBorder"><a-row class="outBorder1" style="text-align: left" id="xgfj"><a-col :span="24" class="inBorder"> 相关附件</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)">预览</a></span></span></s-table></a-row>

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

在方法里写入就可以了

ant design vue之下载相关推荐

chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部代码如下: 1 <a-select v-model="que ...
iviewui php,Vue UI框架对比：Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...

ant design vue之下载

ant design vue之下载相关推荐

最新文章

热门文章

ant design vue之 下载

ant design vue之 下载相关推荐

最新文章

热门文章

ant design vue之下载

ant design vue之下载相关推荐