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

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

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

瀏覽:85日期: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
相關文章:
主站蜘蛛池模板: 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 富森高压水枪-柴油驱动-养殖场高压清洗机-山东龙腾环保科技有限公司 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 氟氨基酮、氯硝柳胺、2-氟苯甲酸、异香兰素-新晨化工 | 求是网 - 思想建党 理论强党 | 玻璃钢型材_拉挤模具_玻璃钢拉挤设备——滑县康百思 | 篮球架_乒乓球台_足球门_校园_竞技体育器材_厂家_价格-沧州浩然体育器材有限公司 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 固诺家居-全屋定制十大品牌_整体衣柜木门橱柜招商加盟 | 定量包装机,颗粒定量包装机,粉剂定量包装机,背封颗粒包装机,定量灌装机-上海铸衡电子科技有限公司 | 众能联合-提供高空车_升降机_吊车_挖机等一站工程设备租赁 | 隧道窑炉,隧道窑炉厂家-山东艾瑶国际贸易 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 | 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 湖州织里童装_女童男童中大童装_款式多尺码全_织里儿童网【官网】-嘉兴嘉乐网络科技有限公司 | MVR蒸发器厂家-多效蒸发器-工业废水蒸发器厂家-康景辉集团官网 | 上海logo设计| 泰安办公家具-泰安派格办公用品有限公司 | 压装机-卧式轴承轮轴数控伺服压装机厂家[铭泽机械] | 美缝剂_美缝剂厂家_美缝剂加盟-地老板高端瓷砖美缝剂 | 高压包-点火器-高压发生器-点火变压器-江苏天网 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 「阿尔法设计官网」工业设计_产品设计_产品外观设计 深圳工业设计公司 | 青岛成人高考_山东成考报名网 | 液氮罐_液氮容器_自增压液氮罐-北京君方科仪科技发展有限公司 | 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 信阳市建筑勘察设计研究院有限公司 | 大功率金属激光焊接机价格_不锈钢汽车配件|光纤自动激光焊接机设备-东莞市正信激光科技有限公司 定制奶茶纸杯_定制豆浆杯_广东纸杯厂_[绿保佳]一家专业生产纸杯碗的厂家 | lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 带式过滤机厂家_价格_型号规格参数-江西核威环保科技有限公司 | 防腐木批发价格_深圳_惠州_东莞防腐木厂家_森源(深圳)防腐木有限公司 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 飞歌臭氧发生器厂家_水处理臭氧发生器_十大臭氧消毒机品牌 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 立式硫化罐-劳保用品硫化罐-厂家直销-山东鑫泰鑫硫化罐厂家 | 冷却塔减速机器_冷却塔皮带箱维修厂家_凉水塔风机电机更换-广东康明冷却塔厂家 | 润滑脂-高温润滑脂-轴承润滑脂-食品级润滑油-索科润滑油脂厂家 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 |