excel的导入导出功能,前端后端都可以实现这个功能,网上也有了很多成熟的解决方案

前端做的话,那么数据的处理就是在前端进行完成,后端提供一个大批数据导入的接口就可以了

后端做的话,前端就直接使用文件上传的方式将excel文件上传到后端,由后端进行数据的转化

做后台项目的话,一般情况下都会有这个功能,现在我就将我的常用的方案分享一下

我使用的是vue-element-admin中提供的excel导入功能

一、excel的导入

首先我们需要去将UploadExcel组件拷贝到需要使用的的项目之中

vue java excle 导出 vue后端导出excel_前端


然后安装一个必要的插件,这个插件叫做xlsx

npm install xlsx -S

在需要的位置引入UploadExcel组件并注册引用,也可以注册成全局组件

vue java excle 导出 vue后端导出excel_数据_02


这上面有两个事件

:before-upload="xxxxxxxx"    文件上传之前的回调
      :on-success="xxxxxxx" 文件上传客户端成功的回调

我们在 :before-upload=“xxxxxxxx” 中可以对文件的大小进行限制
例如:

beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    }

这里对文件大小进行限制,文件必须小于1M,不然就提示文件太大

在 :on-success=“xxxxxxx” 中可以对上传的数据进行转化

这个回调函数接收的数据中可以解构出来一个results,就是是上传的那个文件的数据

这个数据是一个数组的形式,里面的每一个对象对应着一行的数据

vue java excle 导出 vue后端导出excel_vue.js_03


然后我们就可以对这些数据进行处理,将其转化成后续需要的数据形式就可以了

二、excel的导出

在vue-element-admin中提供的excel导出功能其核心代码

onclick: function (){
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
    const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
    const list = this.list
    const data = this.formatJson(filterVal, list)
    excel.export_json_to_excel({
    // 表头  必填项  是一个数组
      header: tHeader,
    // 具体数据  必填项  可以将后端数据请求转化后添加到这
      data,
      filename: this.filename,
      autoWidth: this.autoWidth,
      bookType: this.bookType
    })
    this.downloadLoading = false
 })
}

插件包位于src/vendor/export2Excel中，采用的是按需引入的方式,什么时候正式要使用导出功能了,插件才会被正式引入到应用里

import('@/vendor/Export2Excel').then(excel => {})

Export2Excel依赖的包有js-xlsx、file-saver和script-loader 也就是说，在项目跑起来之前要安装依赖

npm install file-saver script-loader --save

所以我们还需要复制这个文件vendor/export2Excel

vue java excle 导出 vue后端导出excel_前端_04


然后将上面的函数添加到一个事件上

在转化之前,将后端给的数据给 data就可以了,在header中添加你需要的表头

然后就可以直接进行输出了