vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽（使用xlsx库和xlsx-style库）

喜欢ヅ旅行 2024-03-22 14:21 74阅读 0赞

## xlsx ##

`xlsx`是由`SheetJS`开发的一个处理excel文件的npm库

适用于前端开发者实现导入导出excel文件的经典需求

为了区别于xlsx文件，突出其应用语言，该库通常又被称为`js-xlsx`

### 导出js数据为Excel文件 ###

需要以下步骤：

1.  安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库，也可以将 xlsx 下载到本地，然后在 HTML 文件中通过 script 标签引入。
2.  准备数据 将需要导出的数据准备好，并将其存储为一个数组或对象。
3.  创建工作簿 通过 xlsx 库的 `utils.book_new()` 方法创建一个工作簿（workbook）对象，该对象包含一个或多个工作表（worksheet）。
4.  创建工作表 通过 xlsx 库的 `utils.json_to_sheet()` 方法创建一个工作表，并将准备好的数据作为参数传入该方法。如果需要创建多个工作表，可以多次调用该方法，并将它们添加到工作簿对象中。
5.  将工作表添加到工作簿 通过 xlsx 库的 `utils.book_append_sheet()` 方法将创建好的工作表添加到工作簿对象中。
6.  导出数据 通过 xlsx 库的 `writeFile()` 方法将工作簿对象导出为 Excel 文件。你可以指定导出的文件名和文件格式，比如 `.xlsx` 或 `.csv`。

以下是一个使用 xlsx 库将数据导出为 Excel 文件的示例代码：

#### vue ####

### 导入Excel文件生成js数据 ###

1.  使用input type="file"选择xlsx文件
2.  使用fileReader读取文件为二进制编码
3.  XLSX.read方法处理二进制编码为worksheet对象
4.  XLSX.utils.sheet\_to\_json转换worksheet对象为json数据，实际上就是js数组
5.  最后处理数组数据为自己想要的格式即可

<template>
      <article>
        <p>导入高德地图xlsx文件</p>
        <input type="file" ref="upload" accept=".xls,.xlsx" />
      </article>
    </template>
    
    <script>
    import XLSX from "xlsx"
    export default {
        
      mounted() {
        
        // 监听表格导入事件
        this.$refs.upload.addEventListener("change", e => {
        
          this.readExcel(e)
        })
      },
      methods: {
        
        readExcel(e) {
        
          //表格导入
          const files = e.target.files
          //如果没有文件名，不往下执行
          if (files.length <= 0) return
          // 上传文件格式不正确,非xls或者xlsx格式文件，不往下执行
          if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) return
          const fileReader = new FileReader()
          // readAsBinaryString将文件读取为二进制编码
          fileReader.readAsBinaryString(files[0])
          // 读取完成
          fileReader.onload = ev => {
        
            try {
        
              // 二进制数据
              const data = ev.target.result
              // xlsx处理二进制数据
              const workbook = XLSX.read(data, {
        
                type: "binary"
              })
              //取第一张表
              const wsname = workbook.SheetNames[0] 
              // 根据表格内容生成json数据
              const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) 
              const outputs = [] //清空接收数据
              for (let i = 0; i < ws.length; i++) {
        
                const sheetData = {
        
                  value: ws[i].adcode,
                  label: ws[i].中文名
                }
                outputs.push(sheetData)
              }
            } catch (e) {
        
              console.log(e)
            }
          }
        }
      }
    }
    </script>

### xlsx-js-style库使用 ###

xlsx基础库不提供样式设置，可以使用xlsx-js-style库，这个库是xlsx库的fork版本，并添加了样式定义

详细样式可以查看https://github.com/gitbrent/xlsx-js-style/

可以调节背景色、字体样式、border

npm i -s xlsx-js-style

### 去掉标题头 ###

`XLSX.utils.json_to_sheet`默认使用`Object.keys`生成头部

所以如下数据格式不加上`skipHeader: true`,会出现`0 1 2`的索引头部

### 设置列宽 ###

### 合并单元格 ###