表格导入导出功能(含前端/后端实现)

古城微笑少年丶 2022-11-16 13:42 408阅读 0赞

## 通过后端发请求导入: ##

1.写一个隐藏的input,和一个导入按钮

2.写@change事件

fileChange(e) { 
          if (this.$refs.file.value) { 
          //1.发送请求 后端提供 后端返回数据 拿到数据赋值给对应的表格
          //2.清空input值
          this.$refs.file.value = "";
        }

3.onImport方法

onImport(){ 
    	document.getElementById(this.$refs.file.id).click();
    }

## 通过后端发请求导出: ##

1.写一个导出按钮

2.onExport方法

onExport(){ 
    	var params = { 
        	//收集参数
        };
        //设置文件名 后面加有时间 根据自身需求取舍
        var fileName = "xx单" + moment().format("YYYYMMDDhhmmss");
        //发送请求 xxx为接口
        xxx(params).then(res => { 
        	this.DownLoad(res, fileName);
        });
    }
    DownLoad(content, fileName) => { 
      const blob = new Blob([content]);
      var a = document.createElement("a");
      var url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(url);
    };

## 前端导出使用vxe-table完成[vxe-table][] ##

onExport(){ 
    	this.$refs.dataTable.exportData({ 
            type: "csv",
            filename: "盘点单" + moment().format("YYYYMMDDhhmmss"),
            sheetName: "盘点单" + moment().format("YYYYMMDDhhmmss")
          });
    }

## 前端导入 ##

vxetable自带的导入功能有bug,借用了xlsx第三方库,请自行安装:[xlsx][]

import XLSX from "xlsx";
    onImport () { 
                  this.$refs.dataTable.readFile({ 
                    types: ['xls', 'xlsx']
                  }).then(params => { 
                    const {  files } = params
                    const fileReader = new FileReader()
                    fileReader.onload = (ev) => { 
                      const data = ev.target.result
                      const workbook = XLSX.read(data, {  type: 'binary' })
                      const csvData = XLSX.utils.sheet_to_csv(workbook.Sheets.Sheet1)
                      const tableData = []
                      // 解析数据
                      csvData.split('\n').forEach((vRow) => { 
                        if (vRow) { 
                          const vCols = vRow.split(',')
                          const item = { }
                          vCols.forEach((val, cIndex) => { 
                            const column = this.tableColumn[cIndex]
                            if (column.field) { 
                              item[column.field] = val
                            }
                          })
                          tableData.push(item)
                        }
                      })
                      this.tableData1 = tableData
                    }
                    fileReader.readAsBinaryString(files[0])
                  })
                }

[vxe-table]: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install
[xlsx]: https://www.npmjs.com/package/xlsx