巧用GET请求获取后端文件

前言

最近在做项目时，经常会碰到需要下载文件的需求，而当用AJAX去请求下载文件时，会碰到文件流难以处理的问题，所以本文主要是提供a标签以及iframe标签下载文件的方法

a标签下载文件

// 1.把请求地址处理拼装好,在实际开发中应结合不同的环境配置不同的地址
getUrl(id){
    return `127.0.0.1:8080?id=${id}`
}

// 2.利用js新建a标签，同时对a标签的属性进行配置，然后点击下载
downLoad(id){
    const url = this.getUrl(id)             // 获取url
    const a = document.createElement('a')   // 生成a标签
    a.href = url                            // 配置地址
    a.target = '_blank'                     // 在新标签页中打开下载页面
    a.click()                               // 点击a标签
}

// 3.在需要的地方调用downLoad方法，即可在浏览器中打开新页面并下载文件
downLoad(id)

// 4.当文件可以正常下载时，新打开的标签页会关闭，下载失败则不关闭
// 可以按照此规则来判定文件是否可以正常下载

iframe标签下载文件

a标签下载文件在交互上会弹出一个新窗口，如果项目对交互有较高的要求，不允许弹出新页面，又要下载文件，则可以利用内嵌的iframe页面来下载文件

// 1.在页面上嵌入iframe标签，并隐藏，url初始值为空
<iframe :src="url" style="display:none" />

// 2.和a标签的第一步相同，获取url
getUrl(id){
    return `127.0.0.1:8080?id=${id}`
}

// 3.把url的值赋给iframe
setIframeUrl(id){
    // 这里把url重置为空，是为了能重复下载相同地址的文件
    this.url = ''
    this.$nextTick(function() {
        this.url = this.getUrl(id)
    })
}

// 4. 在需要的地方调用setIframeUrl方法
setIframeUrl(id)

// 注意，在这里如果文件下载失败，页面是不会有任何反应的，需要另做处理