vue项目中,实现下载表格的功能

常常在项目开发中,我们会遇到下载表格到本地的功能,一般是前端发送请求,后端返回数据流的形式。
以下方法是通过纯js实现的表格下载,亲测有效哦。
html:

导出表格

js:
// 下载表格文件

exportExcel () {
    axios.get(url, {
            headers:{
                "Admin_token":token
            },
            responseType: 'blob', //二进制流
        }).then(function (res) {
            if(!res) return
            const content = res
            const blob = new Blob([content], {type: 'application/vnd.ms-excel'})
            const fileName = '下载表格'+ '.xls'
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
        }).catch(function (error) {
            console.log(error)
        })
    }

需要注意的地方是在发送请求的时候,需要设置responseType: 'blob'

你可能感兴趣的:(vue项目中,实现下载表格的功能)