Element ui上传excel到并修改字段名

最新推荐文章于 2024-08-30 17:31:51 发布

G_D_Q

最新推荐文章于 2024-08-30 17:31:51 发布

阅读量388

点赞数 2

文章标签： ui excel javascript

本文链接：https://blog.csdn.net/unimpossibles/article/details/136619719

版权

本文介绍了如何在前端使用ElementUI的upload组件接收Excel文件，通过XLSX库读取并转换文件内容，特别关注了如何将Excel中的中文字段名替换为预设的英文字段名的过程。

摘要由CSDN通过智能技术生成

上传excel表格

首先安装依赖并引入

npm install -S xlsx

// 在script中引入
import xlsx from 'xlsx'

添加上传按钮，用到element的upload组件，

<!-- 按钮 -->
<el-upload
           class="upload"
           action=""
           :multiple="false"      //是否支持多选文件
           :show-file-list="false"//是否显示已上传文件列表
           accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"//接受上传的文件类型
           :http-request="httpRequest"//覆盖默认的上传行为，可以自定义上传的实现>
    <el-button size="small" type="primary">上传</el-button>
</el-upload>
<!-- 按钮 end -->

新建一个表格

<!-- 列表 -->
<el-table
          :data="tableData"
          border
          style="width: 100%">
    <el-table-column
                     prop="id"
                     label="DTU编号">
    </el-table-column>
    <el-table-column
                     prop="name"
                     label="名称">
    </el-table-column>
</el-table>
<!-- 列表 end -->

上传方法如下：

      //excel表格上传并生成json，渲染到表格
      httpRequest (e) {
        let file = e.file // 文件信息
        // console.log('e: ', e)
        // console.log('file: ', e.file)
        if (!file) {
          // 没有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根据自己需求定义
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
          return false
        }
        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary' // 以字符编码的方式解析
            })
            const exlname = workbook.SheetNames[0] // 取第一张表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
            console.log(exl)
            // 将 JSON 数据挂到 data 里
            this.tableData = exl
            // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
          } catch (e) {
            // console.log('出错了：：')
            return false
          }
        }
        fileReader.readAsBinaryString(file)
      },

代码中的exl已经生成如下json数组：

[
    {"id":"q2w3e","name":"q2dwe"},
    {"id":"q3w4e","name":"qwd3e"},
    {"id":"q4w5e","name":"qt6we"},
    {"id":"q5w21","name":"q6gwe"},
    {"id":"q61we","name":"qw63e"},
]

修改字段名

首先找到httpRequest方法的这个位置。

const exlname = workbook.SheetNames[0] // 取第一张表
const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容

定位到原来这个环节将取出的表内容生成了json。

//consol.log(exl)如下：
[
    {DTU编号: 'wwe1', 名称: 9072, …}
    {DTU编号: 'wwe2', 名称: 9072, …}
	{DTU编号: 'wwe3', 名称: 9072, …} 
]

问题变成怎么将中文字段名改为对应字段名。

const fieldMappings = {
    'DTU编号': 'id',
    '名称': 'name'
};
// 替换中文字段为指定字段
const exlReplaced = exl.map(item => {
  const replacedItem = {};
  for (const key in item) {
    if (fieldMappings[key]) {
      replacedItem[fieldMappings[key]] = item[key];
    } else {
      replacedItem[key] = item[key];
    }
  }
  return replacedItem;
});