将execl表格内容展示在页面上1. 读取execl表格内容，转成json格式内容，遍历输出到页面上以表格的形式展示 2

背景

工作中需要整理数据表格，想把每天的数据做成折线图以作分析，execl表格有这种生成图表的功能，但用的并不熟练，既然会敲代码那就用技术做个小工具吧使用vue开发

需求

读取execl表格内容，转成json格式内容，遍历输出到页面上以表格的形式展示
用图表组件把数据绘制成折线图

FileReader

FileReader 是一个对象，允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。（表格不支持合并单元格）：

let reader = new FileReader(); // 没有参数

主要方法

readAsArrayBuffer(blob)

将数据读取为二进制格式的 ArrayBuffer。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据

reader.readAsArrayBuffer(blob)

readAsText(blob, [encoding])

将数据读取为给定编码（默认为 utf-8 编码）的文本字符串。

instanceOfFileReader.readAsText(blob[, encoding]);

readAsDataURL(blob)

读取二进制数据，并将其编码为 base64 的 data url。

reader.readAsDataURL(blob);

reader还有很多事件读取的方法都是异步的，需要确保在读取完成后调用👆方法

核心方法（vue写法）

import * as XLSX from 'xlsx' //关键npm包
/**
* 异步读取Excel文件的sheet表为json数据
* 不支持合并单元格
* @param {File对象} file
*/
export function readExcelToJson(file) {
return new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsArrayBuffer(file.raw);
  //等到reader读取完成后
  reader.onload = (e) => {
    let data = new Uint8Array(e.target.result)
    let workbook = XLSX.read(data, { type: 'array' })
    console.log("workbook: ", workbook);
    //将Excel 第一个sheet内容转为json格式
    let worksheet = workbook.Sheets[workbook.SheetNames[0]]
    let json = XLSX.utils.sheet_to_json(worksheet)
    console.log("jsonExcel:", json);
    resolve(json)
  }
})
}

当能拿到json数据后，用echarts绘制图表就非常easy啦！

导出execl 将json转成excel

import FileSaver from 'file-saver' //关键工具 保存文件
/**
 * 保存json为Excel文件
 * @param {*} data
 * @param {*} filename  文件名后缀为.xlsx
 */
export function saveJsonToExcel(data, filename) {
  let sheet = XLSX.utils.json_to_sheet(data)

  let workbook = {
    SheetNames: ['sheet1'],
    Sheets: {
      sheet1: sheet,
    },
  }

  let wbout = XLSX.write(workbook, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array',
  })

  FileSaver.saveAs(
    new Blob([wbout], { type: 'application/octet-stream' }),
    filename
  )
}

echarts文档 echarts.apache.org/handbook/zh…

xlsx用法文档 docs.sheetjs.com/docs/

更多FileReader blog.csdn.net/yqdid/artic…

将execl表格内容展示在页面上

背景

需求