当前位置：首页 > uni-app

uniapp 表格导入

2026-01-14 19:04:52uni-app

uniapp 表格导入的实现方法

使用 uni.chooseFile 选择文件

在 uniapp 中，可以通过 uni.chooseFile API 让用户选择本地文件。该 API 支持多平台，包括 H5、微信小程序和 App。调用该 API 后，用户可以选择 Excel 或 CSV 文件进行上传。

uni.chooseFile({
  count: 1,
  type: 'file',
  success: (res) => {
    const filePath = res.tempFiles[0].path;
    console.log('文件路径:', filePath);
    // 处理文件
  }
});

解析 Excel/CSV 文件

选择文件后，需要对文件内容进行解析。可以使用第三方库如 xlsx 或 papaparse 来解析 Excel 或 CSV 文件。

安装 xlsx 库
在项目目录下运行以下命令安装 xlsx：
```
npm install xlsx
```

解析 Excel 文件
使用 xlsx 库读取 Excel 文件内容：

import * as XLSX from 'xlsx';

function parseExcel(filePath) {
  const workbook = XLSX.readFile(filePath);
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  const jsonData = XLSX.utils.sheet_to_json(worksheet);
  console.log('解析后的数据:', jsonData);
  return jsonData;
}

解析 CSV 文件
使用 papaparse 库解析 CSV 文件：

import Papa from 'papaparse';

function parseCSV(fileContent) {
  Papa.parse(fileContent, {
    header: true,
    complete: (results) => {
      console.log('解析后的数据:', results.data);
    }
  });
}

上传文件到服务器

解析后的数据可以通过网络请求上传到服务器。使用 uni.uploadFile API 实现文件上传：

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: filePath,
  name: 'file',
  success: (uploadRes) => {
    console.log('上传成功:', uploadRes.data);
  },
  fail: (err) => {
    console.error('上传失败:', err);
  }
});

前端展示表格数据

解析后的数据可以通过 uni-app 的列表组件展示。使用 uni-table 或自定义表格组件：

uniapp 表格导入

<template>
  <view>
    <uni-table>
      <uni-tr>
        <uni-th>姓名</uni-th>
        <uni-th>年龄</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td>{{ item.name }}</uni-td>
        <uni-td>{{ item.age }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  }
};
</script>