电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue-以文件流-blob-的形式-下載-導出文件操作

瀏覽:86日期:2022-12-13 13:03:50

vue項目中,經常遇到文件導出與下載,有時候是直接返回服務端的文件url,這樣直接以a鏈接下載,或者windown.open對不同類型的文件進行下載或預覽。但如果返回的是文件流,則需要做一些其他處理,具體形式如下:

1、首先要確定服務器返回的數據類型。

在請求頭中加入: config.responseType = ’blob’

有時候,不是所有接口都需要該類型,則可以對接口做一個判定:

// request攔截器service.interceptors.request.use( config => { // 根據接口判定 if ( config.url === ’/setting/exportData’ || config.url.indexOf(’export’) > -1 || config.url.indexOf(’Export’) > -1) { config.responseType = ’blob’ // 服務請求類型 } if (getToken()) { config.headers[’access_token’] = getToken() } return config }, error => { // Do something with request error // console.log(error) // for debug Promise.reject(error) })

2、接口請求獲取后端返回的文件流

// 導出 onExport() { if (this.dataList === ’’) { this.$message({ type: ’error’, message: ’暫無數據導出’ }) return } const fd = new FormData() fd.append(’id’, this.id) var exportFileName = ’導出文件名’ //設置導出的文件名,可以拼接一個隨機值 exportData(fd) .then(res => { // res.data 是后端返回的文件流 // 調用 downloadUrl 處理文件 downloadUrl(res.data, exportFileName) }) .catch(err => { this.$message({ type: ’error’, message: err.message }) }) },

3、文件處理downloadUrl--該方法可以寫為公共方法以便調用

// 使用iframe框架下載文件--以excel為例,可修改type與fileName選擇文件類型export function downloadUrl(res, name) { const blob = new Blob([res], { type: ’application/vnd.ms-excel’ }) // 構造一個blob對象來處理數據 const fileName = name + ’.xlsx’ // 導出文件名 const elink = document.createElement(’a’) // 創建a標簽 elink.download = fileName // a標簽添加屬性 elink.style.display = ’none’ elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() // 執行下載 URL.revokeObjectURL(elink.href) // 釋放URL 對象 document.body.removeChild(elink) // 釋放標簽}

4、在ie瀏覽器中存在兼容性問題,對downloadUrl做一些調整

// 使用iframe框架下載文件 -兼容性考慮export function downloadUrl(res, name) { const blob = new Blob([res], { type: ’application/vnd.ms-excel’ }) // for IE if (window.navigator && window.navigator.msSaveOrOpenBlob) { const fileName = name + ’.xlsx’ window.navigator.msSaveOrOpenBlob(blob, fileName) } else { // for Non-IE (chrome, firefox etc.) const fileName = name + ’.xlsx’ const elink = document.createElement(’a’) elink.download = fileName elink.style.display = ’none’ elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) document.body.removeChild(elink) }}

總結:至此,以文件流的形式導出文件的一種方式便已經實現。

補充知識:vue中使用文件流進行下載(new Blob),不打開一個新頁面下載

我就廢話不多說了,大家還是直接看代碼吧~

export function download (url, params, filename) { Message.warning(’導出數據中’) return axios.get(url, { params: params, responseType:’arraybuffer’, }).then((r) => { const content = r.data const blob = new Blob([content],{type:’application/vnd.ms-excel’}) if (’download’ in document.createElement(’a’)) { const elink = document.createElement(’a’) elink.download = filename elink.style.display = ’none’ elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) document.body.removeChild(elink) Message.success(’導出成功’) } }).catch((r) => { console.error(r) Message.error(’導出失敗’) })}

以上這篇vue-以文件流-blob-的形式-下載-導出文件操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 盘煤仪,盘料仪,盘点仪,堆料测量仪,便携式激光盘煤仪-中科航宇(北京)自动化工程技术有限公司 | 冷却塔减速机器_冷却塔皮带箱维修厂家_凉水塔风机电机更换-广东康明冷却塔厂家 | 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 点胶机_点胶阀_自动点胶机_智能点胶机_喷胶机_点胶机厂家【欧力克斯】 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | crm客户关系管理系统,销售管理系统,crm系统,在线crm,移动crm系统 - 爱客crm | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 盛源真空泵|空压机-浙江盛源空压机制造有限公司-【盛源官网】 | 耐磨焊丝,堆焊焊丝,耐磨药芯焊丝,碳化钨焊丝-北京耐默公司 | EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 超声波乳化机-超声波分散机|仪-超声波萃取仪-超声波均质机-精浩机械|首页 | 政府园区专业委托招商平台_助力企业选址项目快速落地_东方龙商务集团 | 全自动贴标机-套标机-工业热风机-不干胶贴标机-上海厚冉机械 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | uv固化机-丝印uv机-工业烤箱-五金蚀刻机-分拣输送机 - 保定市丰辉机械设备制造有限公司 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司 | 在线PH计-氧化锆分析仪-在线浊度仪-在线溶氧仪- 无锡朝达 | 餐饮加盟网_特色餐饮连锁加盟店-餐饮加盟官网 | 玄米影院| 北京四合院出租,北京四合院出售,北京平房买卖 - 顺益兴四合院 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 知网论文检测系统入口_论文查重免费查重_中国知网论文查询_学术不端检测系统 | 高效复合碳源-多核碳源生产厂家-污水处理反硝化菌种一长隆科技库巴鲁 | 派克防爆伺服电机品牌|国产防爆伺服电机|高低温伺服电机|杭州摩森机电科技有限公司 | 盘装氧量分析仪-防爆壁挂氧化锆分析仪-安徽吉帆仪表有限公司 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 济南网站策划设计_自适应网站制作_H5企业网站搭建_济南外贸网站制作公司_锐尚 | 天津市能谱科技有限公司-专业的红外光谱仪_红外测油仪_紫外测油仪_红外制样附件_傅里叶红外光谱技术生产服务厂商 | 脱硝喷枪-氨水喷枪-尿素喷枪-河北思凯淋环保科技有限公司 | 杭州可当科技有限公司—流量卡_随身WiFi_AI摄像头一站式解决方案 | 陶氏道康宁消泡剂_瓦克消泡剂_蓝星_海明斯德谦_广百进口消泡剂 | 提升海外网站流量,增加国外网站访客UV,定制海外IP-访客王 | 对夹式止回阀_对夹式蝶形止回阀_对夹式软密封止回阀_超薄型止回阀_不锈钢底阀-温州上炬阀门科技有限公司 | 南京精锋制刀有限公司-纵剪机刀片_滚剪机刀片_合金刀片厂家 | 标准品网_标准品信息网_【中检计量】| 361°官方网站| 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 色油机-色母机-失重|称重式混料机-称重机-米重机-拌料机-[东莞同锐机械]精密计量科技制造商 |