Как js читает файлы excel и рисует графики.

Excel

1. Описание сценария

  • Вообще говоря, чтобы получить данные Excel из внешнего интерфейса, он сначала загружает базу данных хранилища, а затем запрашивает внутренний интерфейс для получения данных.
  • Но у 100 продакт-менеджеров будет 101 потребность.
  • В этой статье в качестве примера используется мой собственный проект vue.

2. Описание спроса

  • Существует существующий финансовый отчет в формате Excel, который необходимо преобразовать в различные графики на основе этого листа Excel для годовой отчетности.
  • Передняя часть выполняется самостоятельно, не проходя заднюю часть.

3. Реализация функции

  • Прежде всего, чтобы нарисовать данные Excel в диаграмме echarts, внешний интерфейс должен получить данные Excel.
  1. Здесь мы устанавливаем xlsx с помощью библиотеки js-xlsx.js:
cnpm i -S xlsx

你也可以cdn的方式直接引用：
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
  1. Сначала вам нужно прочитать файл excel:
<input type="file" id="excel-file">
  1. Добавьте изменение события ответа, чтобы получить данные Excel:
<input type="file" id="excel-file" @change="updateFile">

通过updateFile接受数据
updateFile(e) {
  let files = e.target.files;
  console.log(files)
}
  1. Получить файлы, указывая на то, что мы получили загруженный файл Excel. Теперь нам нужно преобразовать файлы в привычный тип массива. Мы используем метод fileReader.
// FileReader共有4种读取方法：
// 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
// 2.readAsBinaryString(file)：将文件读取为二进制字符串
// 3.readAsDataURL(file)：将文件读取为Data URL
// 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'

 updateFile(e) {
  let _this = this;
  let files = e.target.files;
  let fileReader = new FileReader();
  fileReader.onload = function(ev) {
    try {
      let data = ev.target.result;
      let workbook = XLSX.read(data, { type: "binary" }); // 以二进制流方式读取得到整份excel表格对象
      let sheetName = workbook.Sheets[workbook.SheetNames[0]]; // 这里我们只读取第一张表，获取表名（如Sheet1）
      _this.excelData = XLSX.utils.sheet_to_json(sheetName, {
        header: "A",
        raw: true,
        defval: " " // 意思是从头开始匹配，如遇到空格，将跳过执行，并替换为" "字符串。
      });
      console.log(_this.excelData) // excelData在data()中声明的变量, _this.excelData就是我们熟悉的数组数据了。
    } catch (e) {
      return _this.$message.error("文件类型不正确！");
    }
  };
  // fileReader.readAsBinaryString(files[0]); // 将文件读取为二进制字符串展示在页面
}
  1. Работа с несколькими листами в excel
var fromTo = '' // 表格范围，可用于判断表头数量是否正确
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
    if (workbook.Sheets.hasOwnProperty(sheet)) {
        fromTo = workbook.Sheets[sheet]['!ref'] // 表头数量
        _this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]), {
            header: 'A', 
            raw: true, 
            defval: ' '
        })
    }
}
  1. Полученные данные визуализировать в диаграммах, эффект получается такой:

4, конец слов

  • В этой статье в основном объясняется часть сбора данных в Excel.
  • Как обрабатывать полученные данные массива, будет подробно объяснено в следующей статье.
  • Иконка echarts здесь подробно объясняться не будет, а общая конфигурация значка echarts будет описана позже. Например, разрыв строки в подсказке рендеринга, многоцветная настройка стиля и т. д.
Категории