前端导出excel

在开发管理系统中，导出excel最为常见。前端和后端都可以去实现。比较常见的需求有：

1、不存在分页情况下，当前页面展示的就是所有数据，导出全部和导出选中

2、存在分页情况下，当前页面展示的是当前页码对应的数据，导出全部和导出选中

前端实现导出功能有三种思路：

1、后端去处理导出，返回前端一个excel的url，前端通过a标签的download下载功能去实现下载

2、后端返回blob数据，前端通过window.URL.createObjectURL(blob)结合a标签的下载功能实现

// 请求接口
exportExcel(data) {
    return axios.post('api', { responseType: 'arraybuffer' })
}

  exportExcel: function ({ commit }, model) {
    const excelData = model.excel
    //等待动画开启
    commit(type.DOWN_LOADING, true)
    request.exportExcel(model)
      .then(res => {
        let startTime = excelData.startTime.replace(' 00:00:00', '')
        let endTime = excelData.endTime.replace(' 23:59:00', '')
        // 这里res.data是返回的blob对象
        // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        // Blob对象：表示一个不可变、原始数据的类文件对象
        var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
        var downloadElement = document.createElement('a')
        document.body.appendChild(downloadElement)
        downloadElement.download = `${startTime}至${endTime}${state.departmentName}通话记录`
        // 创建下载的链接
        var href = window.URL.createObjectURL(blob)
        //下载完成关闭等待动画
        commit(type.DOWN_LOADING, false)
        commonUtils.setMessage('success', '导出成功！',true)
        downloadElement.href = href
        // 点击下载
        downloadElement.click()
        // 下载完成移除元素
        document.body.removeChild(downloadElement)
        // 释放掉blob对象
        window.URL.revokeObjectURL(href)
      })
      .catch(error => {
        //出错关闭等待动画
        commit(type.DOWN_LOADING,false)
        commonUtils.setMessage('error', '下载失败请重试',true)
      })
  }

3、js-file-download 插件

4、完全前端实现导出，通过excel.js三方插件

export2excel.js(手动下载)

cnpm i file-saver -S
cnpm i xlsx -S