Vue 前端下载 zip/excel文件流blob

最新推荐文章于 2024-12-21 14:20:43 发布

原创最新推荐文章于 2024-12-21 14:20:43 发布 · 843 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript

收录于

前端下载专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue前端应用中如何处理并下载zip和excel文件流，涉及到转换为Blob对象及利用a标签实现非跳转下载的方法。

            const filePath = // 下载地址
            const fileName = // 文件名称
            // 下载文件
            const fileRes = await axios.get(filePath, {
              responseType: 'blob'
            })
            // 临时创建一个Blob对象，储存文件数据
            // type: application/vnd.ms-excel;charset=utf-8 excel文件
            // type: application/zip zip文件
            const blob = new Blob([fileRes.data], { type: 'application/zip' }) 
            // 创建a标签，模拟点击a标签，实现文件下载功能
            const downloadElement = document.createElement('a')
            const href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            // 设置文件名
            if (window.navigator && window.navigator.msSaveBlob) {
              window.navigator.msSaveBlob(blob, fileName) // 兼容IE
            } else {
              downloadElement.download = `${fileName}`
            }
            document.body.appendChild(downloadElement)
            downloadElement.click()
            document.body.removeChild(downloadElement)
            window.URL.revokeObjectURL(href) // 释放掉blob对象