页面导出Excel

后端:

1、准备要导出的数据

2、利用XSSFWorkbook对象(workbook)创建工作簿行列等并添加数据

3、响应给前端

例:

// 获取响应流
OutputStream output = response.getOutputStream();
response.reset();
response.setHeader("Content-disposition",
        "attachment; filename=" + fileName);
response.setContentType("application/msexcel");
workbook.write(output);
View Code

前台:

1、发起请求

2、接收文件流

例:

// 推文列表导出到Excel接口
export function exportExcelBack (parameter) {
  return axios({
    url: BASE_URL + '/tweet/exportExcel',
    method: 'get',
    params: parameter,
    responseType: 'blob'
  })
}
View Code

接收到以后:

/**
 * 将后端传来的文件流转变为下载文件(excel, xlsx类型)
 * @param {buffer} data 文件流
 * @param {String} fileName 文件名
 */
export function downloadExcelOfBuffer (data, fileName = '未命名.xlsx') {
    // 若无数据,直接返回
    if (!data) return false
    // 检验名称
    const reg = /\.(xlsx)$/gi
    if (!reg.test(fileName)) fileName = '未命名.xlsx'

    // 获取数据类型
    const blob = new Blob([data], { type: 'application/msexcel' })
    const a = document.createElement('a')
    // 创建URL
    const blobUrl = window.URL.createObjectURL(blob)
    a.download = fileName
    a.href = blobUrl
    document.body.appendChild(a)
    // 下载文件
    a.click()
    // 释放内存
    URL.revokeObjectURL(blobUrl)
    document.body.removeChild(a)
    return true
}
View Code

 

posted @ 2021-10-13 18:09  喵师傅  阅读(152)  评论(0编辑  收藏  举报