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

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

<script setup>import*asXLSXfrom"xlsx/xlsx.mjs";constdownload=()=>{const data =[["姓名","年龄","性别"],["张三",18,"男"],["李四",22,"女"],["王五",25,"男"],];const workbook =XLSX.utils.book_new();const worksheet =XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(workbook, worksheet,"Sheet1");XLSX.writeFile(workbook,"data.xlsx");};</script><template><button @click="download">导出</button></template>

导入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>importXLSXfrom"xlsx"exportdefault{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()))returnconst fileReader =newFileReader()// 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

<script setup>importXLSXfrom"xlsx-js-style";
console.log();constdownload=()=>{const wb =XLSX.utils.book_new();const ws =XLSX.utils.aoa_to_sheet([["Hello","World"],[1,2],]);// 在单元格对象中添加 `s` 属性来设置该单元格的样式
  ws["A1"].s ={font:{bold:true},alignment:{horizontal:"center"},fill:{fgColor:{rgb:"FFFF0000"}},};
  ws["B2"].s ={alignment:{horizontal:"center"},font:{bold:true},fill:{fgColor:{rgb:"FFFF0000"}},};XLSX.utils.book_append_sheet(wb, ws,"Sheet1");XLSX.writeFile(wb,"example.xlsx");};</script>

去掉标题头

XLSX.utils.json_to_sheet

默认使用

Object.keys

生成头部

所以如下数据格式不加上

skipHeader: true

,会出现

0 1 2

的索引头部

<script setup>importXLSXfrom"xlsx-js-style";constdownload=()=>{const data =[["姓名","年龄","性别"],["张三",18,"男"],["李四",22,"女"],["王五",25,"男"],];const wb =XLSX.utils.book_new();const ws =XLSX.utils.json_to_sheet(data,{
    skipHeader:true,});XLSX.utils.book_append_sheet(wb, ws,"Sheet1");XLSX.writeFile(wb,"example.xlsx");};</script><template><button @click="download">导出</button></template>

设置列宽

<script setup>importXLSXfrom"xlsx-js-style";constdownload=()=>{const data =[{姓名:"张三",年龄:18,性别:"男"},{姓名:"李四",年龄:20,性别:"女"},{姓名:"王五",年龄:22,性别:"男"},];const wb =XLSX.utils.book_new();const ws =XLSX.utils.json_to_sheet(data);
  ws["!cols"]=[{wpx:150,},{wpx:500,},{wpx:100,},];XLSX.utils.book_append_sheet(wb, ws,"Sheet1");XLSX.writeFile(wb,"example.xlsx");};</script><template><button @click="download">导出</button></template>

合并单元格

<script setup>importXLSXfrom"xlsx-js-style";constdownload=()=>{const data =[{姓名:"张三",年龄:18,性别:"男"},{姓名:"李四",年龄:20,性别:"女"},{姓名:"王五",年龄:22,性别:"男"},];const wb =XLSX.utils.book_new();const ws =XLSX.utils.json_to_sheet(data);// s 表示要合并的单元格范围的左上角单元格，r 表示该单元格的行号，c 表示该单元格的列号，行列号从 0 开始计数。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的单元格，即 A1 单元格。// e 表示要合并的单元格范围的右下角单元格，其含义与 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的单元格，即 B1 单元格。// 因此，{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之间的元格。// 注意，合并会以开始位置单元格中的内容为准，所以合并后的单元格中的内容为 A1 单元格中的内容。
  ws["!merges"]=[{s:{r:0,c:0},e:{r:0,c:2}}];XLSX.utils.book_append_sheet(wb, ws,"Sheet1");XLSX.writeFile(wb,"example.xlsx");};</script><template><button @click="download">导出</button></template>