☀️Обучающая серия: React реализует импорт и экспорт Excel

React.js

Если честно, то компания очень скучная, не знаю что делать, пишите в блог, чтобы это зафиксировать

1. Строительство окружающей среды

Пока не скажу, что я строил окружение со своими простыми скаффолдингами, есть много кодов, которые не имеют ничего общего с excel, рекомендуется использовать свои скаффолдинги. Это адрес моего проекта на githubДемонстрация самородков. Байду сам по себеcreate-react-appДождитесь официально рекомендованных строительных лесов. Здесь объясняются только основные функции Excel.

Два, экспорт в Excel

1. Создайте новый файл tsx

На самом деле я не очень хорошо знаком с ts, поэтому отношусь к tsx как к счастливому. Суффикс ts пуст, что на самом деле является js (синтаксис). Всего одна страница, адрес страницыtx-файл.

2. Обратитесь к некоторым компонентам antd

Чтобы быть кратким и ясным, мы прямо ссылаемся на некоторые компоненты antd здесь

import { Button,Table,Upload } from 'antd';

<Upload {...uploadProps}>
    <Button type="primary" >Excel导入</Button>
</Upload>

<Button type="primary" onClick={this.handleExportAll}>Excel导出数据</Button>

<Button type="primary" onClick={this.handleExportDocument}>Excel导出格式文件</Button>

<Table columns={columns} dataSource={data} bordered></Table>

3. Основные плагиныxlsxпредставлять

1. Установка

npm install xlsx --save-dev

2. Введение в использование API

1.XLSX.read(data,type)

尝试解析data数据 解析的类型

2.workbook.Sheets[workbook.SheetNames[0]]

是工作簿中的工作表的有序列表

3.XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });

将工作簿对象转换为JSON对象数组

Другие API можно просмотретьофициальный сайт xlsx git

3. Импортируйте реализацию

1. Во-первых, часть рендеринга реакции записывается в компонент antd.

/*组件部分*/
<Upload {...uploadProps}>
    <Button type="primary" >Excel导入</Button>
</Upload>

/*js部分*/
const uploadProps={
    onRemove: file => {
        this.setState(state => ({
            data:[],
            fileList:[]
        }));
    },
    accept: ".xls,.xlsx,application/vnd.ms-excel",
    beforeUpload: (file) => {
        const _this=this;
        const f = file;
        const reader = new FileReader();
        reader.onload = function (e) {
        const datas = e.target.result;
        const workbook = XLSX.read(datas, {
            type: 'binary'
        });//尝试解析datas
        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];//是工作簿中的工作表的有序列表
        const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });//将工作簿对象转换为JSON对象数组
         _this.handleImpotedJson(jsonArr, file);
        };
        reader.readAsBinaryString(f);
        return false;
    },
    fileList,
};
  1. onRemoveЗапускается ли действие при удалении файла, здесь действие заключается в очистке данных.
  2. acceptэто тип файла, который принимает загрузку.
  3. beforeUploadЭто хук перед загрузкой файла.Параметром является загруженный файл.Если он возвращает false, то загрузка будет остановлена.Это только для конвертации данных,и реальной загрузки нет.
  4. fileListпредставляет собой список файлов.

Дополнительные API см.и загрузить официальный сайт

2. Понимание основного кода

Всего несколько строк

const f = file;
const reader = new FileReader();
reader.onload = function (e) {
    const datas = e.target.result;
    const workbook = XLSX.read(datas, {
        type: 'binary'
    });//尝试解析datas

    const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];//是工作簿中的工作表的有序列表
    const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });//将工作簿对象转换为JSON对象数组
    _this.handleImpotedJson(jsonArr, file);
};
reader.readAsBinaryString(f);

1. Во-первых, объект FileReader создает экземпляр файлового объекта.

2. Обработка в событии onload файлового объекта

3. Используйте XLSX.read для анализа данных

4 .first_worksheet — это проанализированные данные

5 .XLSX.utils.sheet_to_json(first_worksheet, {header: 1}); Преобразование объекта рабочей книги в объект JSON

6. Метод handleImpotedJson может выполнять ряд операций над объектом json и преобразовывать его в таблицу.

handleImpotedJson = (array, file) => {
       
        const header = array[0];//头部数据 ["姓名",...]
        const entozh = this.formatTitleOrFileld('title', 'dataIndex');//将表字段数组形式转化为对象形式,如：{"姓名":"name",...}
        const firstRow = header.map(item => entozh[item]);//可以获取到行属性 ["name",...]

        const newArray = [...array];

        newArray.splice(0, 1);//去除表头

        const json = newArray.map((item, index) => {
            const newitem = {};
            item.forEach((im, i) => {
                const newKey = firstRow[i] || i;
                newitem[newKey] = im
            })
            return newitem;
        });//将存在表头定义字段的值赋值

        const formatData = json.map(item => ({
            name: item.name,
            age: item.age,
            address: item.address,
        }))//筛选出自己需要的属性

        this.setState({ data: formatData, fileList: [file] });

        return formatData;
}

formatTitleOrFileld = (a, b) => {
        const entozh = {};
        this.state.columns.forEach(item => {
            entozh[item[a]] = item[b]
        })
        return entozh;
}

3. рендеринг

Три, экспорт в Excel

1. Экспорт данных таблицы из Excel

1. Код сначала

<Button type="primary" onClick={this.handleExportAll}>Excel导出数据</Button>

handleExportAll = (e) => {
        const entozh = {
          "name":"姓名",
          "age":"年龄",
          "address":"地址"
        }

        const nowdata = this.state.data;

        const json = nowdata.map((item) => {
          return Object.keys(item).reduce((newData, key) => {
            const newKey = entozh[key] || key
            newData[newKey] = item[key]
            return newData
          }, {})
        });
  
  
        const sheet = XLSX.utils.json_to_sheet(json);
 
        this.openDownloadDialog(this.sheet2blob(sheet,undefined), `全部信息.xlsx`);
   
}
openDownloadDialog = (url, saveName) => {
        if (typeof url == 'object' && url instanceof Blob) {
          url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent('click');
        else {
          event = document.createEvent('MouseEvents');
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
}
sheet2blob = (sheet, sheetName) => {
        sheetName = sheetName || 'sheet1';
        var workbook = {
          SheetNames: [sheetName],
          Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
  
        var wopts = {
          bookType: 'xlsx', // 要生成的文件类型
          bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
          type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {
          type: "application/octet-stream"
        }); // 字符串转ArrayBuffer
        function s2ab(s) {
          var buf = new ArrayBuffer(s.length);
          var view = new Uint8Array(buf);
          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
          return buf;
        }
  
        return blob;
}

2. Объяснение основного кода

1.XLSX.utils.json_to_sheet

字面意思，可以将工作簿对象转化为json对象

2.openDownloadDialog

此方法创建了a标签 利用a标签的download属性进行下载文件

3.sheet2blob

可以将工作簿对象转化为我们需要的

3. Рендеринг

2. Файл стандартного формата экспорта таблицы

По сути, это то же самое, что и выше, за исключением того, что данные заголовка сохраняются, разница только в том, что

let nowdata = [
            {"name":""},
            {"age":""},
            {"address":""},
            
];

Преобразуйте объект данных в состоянии в форму пустого массива.

Если вы не понимаете, вы можете добавить меня в WeChat и спросить меня

Категории