前端生成下载文件，兼容浏览器写法

CurryChou777

于 2019-05-13 11:31:37 发布

阅读量880

点赞数 1

分类专栏： vue js 文章标签： excel 前端下载文件

本文链接：https://blog.youkuaiyun.com/m0_37727560/article/details/90169975

版权

js 同时被 2 个专栏收录

23 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

本文介绍了一种从前端获取后端返回的二进制数据并将其转换为可下载文件的方法，以Excel文件为例，展示了如何使用Blob和URL.createObjectURL实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过获取后端接口，返回二进制内容，前端根据二进制数据生成文件这里以excel为例，具体生成文件可以修改文件名即可

API_SYSTEMSET.logDownload(param).then(data => {

    let content = data

    let filename = '名称.xls'

    const blob = new Blob([content])

    if (window.navigator.msSaveOrOpenBlob) {

        navigator.msSaveBlob(blob, filename)

    } else {

        let aTag = document.createElement('a')

        aTag.download = filename

        aTag.href = URL.createObjectURL(blob)

        document.body.appendChild(aTag) // 添加节点到dom中，兼容firefox

        aTag.click()

        URL.revokeObjectURL(aTag.href)

        setTimeout(function () { document.body.removeChild(aTag) }, 1000) // 移除dom节点

    }

})