前端下载文件方式之：创建a标签下载文件

最新推荐文章于 2024-07-04 15:15:40 发布

清渡欢LL

最新推荐文章于 2024-07-04 15:15:40 发布

阅读量1.4k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_39246667/article/details/119530621

版权

日常工作中，通过a标签下载文件也是相当常见的场景。(后端返回二进制文件流)
每一行都有写注释，就不做过多描述，直接上代码

/**
         * @description:签到资料导出
         */
        handleExportExcel(){
            this.exportRequest(`${this.exportExeclUrl}?meetingKey=${this.richengMeetingKey}`,{
            }).then(res =>{
                console.log(res)
                // if(res.data.state === 200){
                    // 后端返回二进制文件流，创建Blog二进制对象
                    const blob = new Blob([res.data])
                    // 定义文件名
                    const filename = res.headers.filename
                    // IE和其他浏览器下载处理
                    if('download' in document.createElement('a')){
                        // 非IE浏览器下载
                        // 创建a标签
                        const link = document.createElement('a')
                        // 规定下载的超链接
                        link.download = filename
                        // 未点击前隐藏a链接
                        link.style.display = 'none'
                        // 创建URL对象，指向该文件url
                        link.href = URL.createObjectURL(blob)
                        // 将a标签添加到dom中
                        document.body.append(link)
                        // 触发a标签点击事件
                        link.click()
                        // 释放之前的URL对象
                        URL.revokeObjectURL(link.href)
                        // 从dom中移除该a链接
                        document.body.removeChild(link)
                    }else {
                        // IE10+ 下载
                        navigator.msSaveBlob(blob,filename)
                    }
            })
        },