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

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

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

瀏覽:84日期: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
相關文章:
主站蜘蛛池模板: 防腐储罐_塑料储罐_PE储罐厂家_淄博富邦滚塑防腐设备科技有限公司 | 定坤静电科技静电消除器厂家-除静电设备| 上海阳光泵业制造有限公司 -【官方网站】 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 工装定制/做厂家/公司_工装订做/制价格/费用-北京圣达信工装 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 截齿|煤截齿|采煤机截齿|掘进机截齿|旋挖截齿-山东卓力截齿厂家报价 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 健身器材-健身器材厂家专卖-上海七诚健身器材有限公司 | 压片机_高速_单冲_双层_花篮式_多功能旋转压片机-上海天九压片机厂家 | 威客电竞(vk·game)·电子竞技赛事官网| 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 河南中专学校|职高|技校招生-河南中职中专网 | 合肥钣金加工-安徽激光切割加工-机箱机柜加工厂家-合肥通快 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | 澳洁干洗店加盟-洗衣店干洗连锁「澳洁干洗免费一对一贴心服务」 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 青岛空压机,青岛空压机维修/保养,青岛空压机销售/出租公司,青岛空压机厂家电话 | 阻垢剂,反渗透阻垢剂,缓蚀阻垢剂-山东普尼奥水处理科技有限公司 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 | 不锈钢复合板|钛复合板|金属复合板|南钢集团安徽金元素复合材料有限公司-官网 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 东风体检车厂家_公共卫生体检车_医院体检车_移动体检车-锦沅科贸 | 新能源汽车教学设备厂家报价[汽车教学设备运营18年]-恒信教具 | 自动售货机_无人售货机_专业的自动售货机运营商_免费投放售货机-广州富宏主官网 | 杭州公司变更法人-代理记账收费价格-公司注销代办_杭州福道财务管理咨询有限公司 | 创富网-B2B网站|供求信息网|b2b平台|专业电子商务网站 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 深圳VI设计-画册设计-LOGO设计-包装设计-品牌策划公司-[智睿画册设计公司] | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 小威小说网 - 新小威小说网 - 小威小说网小说搜索引擎 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 硬齿面减速机[型号全],ZQ减速机-淄博久增机械 | 铝扣板-铝方通-铝格栅-铝条扣板-铝单板幕墙-佳得利吊顶天花厂家 elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 小型玉石雕刻机_家用玉雕机_小型万能雕刻机_凡刻雕刻机官网 | 楼承板-开闭口楼承板-无锡海逵楼承板 |