前端 文件（文档、excel等）下载

文件下载是项目开发过程中经常提到的需求点，本文对以往用过，见过的文件下载方法进行一个汇总，如果后面有遇到，会继续进行补充

一、直接通过后台给的链接URL进行文件的下载，如后台给的文件下载地址为：http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx

方式1： 直接使用 HTML的 a 元素进行文件的下载
<a href="http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx" download="test文件的下载"></a>

方式2：使用 window.open(url)
window.open("http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx", "_blank") // 新开窗口下载

方式3：使用 location.href(url)
location.href("http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx") // 本窗口打开下载

方式4：在页面无 a 元素的情况下，创建 a 元素，再进行下载
let a = document.createElement('a')
a.download = 'test文件下载'
a.href = 'http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx
a.click()

方式5：通过 iframe 进行下载
let iframe = document.createElement('iframe')
iframe.src = 'http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export/test.xlsx
iframe.display = 'none'
document.body.appendChild(iframe)

方式6：前端传参，后端生成文件，实现步骤如下
步骤1、前端通过发送数据或参数给到后端
步骤2、后端根据接收的数据生成文件或根据参数查找出对应的数据在生成文件
步骤3、然后在响应请求头中设置 Content-disposition：attachment；filename="fliename.fileType" 用于指定文件类型、文件名和文件编码等（ Content-disposition（内容-部署）是MIME协议类型的扩展，MIME协议指示MIME用户代理如何显示附加的文件）
步骤4、浏览器接收到响应头后就会触发下载行为

二、请求后台接口，接口返回数据为 arraybuffer

请求接口我这里用的是 axios，也可以使用 ajax，原生 XMLHttpRequest，fetch 等方式
import axios from 'axios' // 项目中下载安装 axios（npm install axios --save）后，引入 axios
import {getToken} from '@/utils/token' // 获取 token

// 接口请求，获取数据
getFileData(){
    params = {
        fileName: 'test.xlsx',
        downloadName: 'test文件下载'
    }
    axios({
        methods: 'get',
        url: 'http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export',
        headers: {
            'Authorization': 'Bearer' + getToken()
        },
        params: params,
        ResponseType: 'arraybuffer'
    }).then(response => {
        this.dowbloadFile(response)
    })
}

// 文件下载
dowbloadFile(response) {
    const blob = new Blob([response], {type: 'application/vnd.ms-excel'}) // 注意：这里是下载 excel 文件，因此 type 是 application/vnd.ms-excel，如果是其他类型文件，那么 type 要与之相对应
    const aLink = document.createElement('a')
    aLink.download = 'test文件下载'
    aLink.href = URL.createObjectURL(blob)
    document.body.appendChild(aLink)
    aLink.click()
    URL.revokeObjectURL(aLink.href)
    document.body.removeChild(aLink)
},

三、请求后台接口，接口返回数据为 blob

请求接口我这里用的是 axios，也可以使用 ajax，原生 XMLHttpRequest，fetch 等方式
import axios from 'axios' // 项目中下载安装 axios（npm install axios --save）后，引入 axios
import {getToken} from '@/utils/token' // 获取 token

// 接口请求，获取数据
getFileData(){
    params = {
        fileName: 'test.xlsx',
        downloadName: 'test文件下载'
    }
    axios({
        methods: 'get',
        url: 'http://hrmanage-test.edtsoft.com/hr-manage-admin/aaa/bbb/export',
        headers: {
            'Authorization': 'Bearer' + getToken()
        },
        params: params,
        ResponseType: 'blob'
    }).then(response => {
        this.dowbloadFile(response)
    })
}

// 文件下载方式1 -- 直接使用 URL.createObjectURL 来转换后台返回的 blob 数据
dowbloadFile(response) {
    const aLink = document.createElement('a')
    aLink.download = 'test文件下载'
    aLink.href = URL.createObjectURL(response)
    document.body.appendChild(aLink)
    aLink.click()
    URL.revokeObjectURL(aLink.href)
    document.body.removeChild(aLink)
},



// 文件下载方式2 -- 通过 FileReader 来转换后台返回的 blob 数据
dowbloadFile(response) {
    const blob = new Blob([response], {type: 'application/vnd.ms-excel'}) // 注意：这里是下载 excel 文件，因此 type 是 application/vnd.ms-excel，如果是其他类型文件，那么 type 要与之相对应
    const fileReader = new FileReader()

    fileReader.readAsDataURL(blob)
    fileReader.onload = (e) => {
        const aLink = document.createElement('a')
        aLink.download = 'test文件下载'
        aLink.href = e.target.result
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
    }
},

就写到这里，后面有遇到其他的再补充，祝大家开心！！！