vue使用xlsx庫和xlsx-style庫導入導出excel、設置單元格背景色、文字居中、合并單元格、設置列寬

更新時間：2023年11月25日 10:10:58 作者：永遠不會太晚

xlsx是由SheetJS開發(fā)的一個處理excel文件的npm庫,適用于前端開發(fā)者實現(xiàn)導入導出excel文件的經(jīng)典需求,這篇文章主要介紹了vue使用xlsx庫和xlsx-style庫導入導出excel、設置單元格背景色、文字居中、合并單元格、設置列寬,需要的朋友可以參考下

xlsx

xlsx是由SheetJS開發(fā)的一個處理excel文件的npm庫

適用于前端開發(fā)者實現(xiàn)導入導出excel文件的經(jīng)典需求

為了區(qū)別于xlsx文件，突出其應用語言，該庫通常又被稱為js-xlsx

導出js數(shù)據(jù)為Excel文件

需要以下步驟：

安裝 xlsx 庫你可以使用 npm 包管理器安裝 xlsx 庫，也可以將 xlsx 下載到本地，然后在 HTML 文件中通過 script 標簽引入。
準備數(shù)據(jù) 將需要導出的數(shù)據(jù)準備好，并將其存儲為一個數(shù)組或對象。
創(chuàng)建工作簿通過 xlsx 庫的 utils.book_new() 方法創(chuàng)建一個工作簿（workbook）對象，該對象包含一個或多個工作表（worksheet）。
創(chuàng)建工作表通過 xlsx 庫的 utils.json_to_sheet() 方法創(chuàng)建一個工作表，并將準備好的數(shù)據(jù)作為參數(shù)傳入該方法。如果需要創(chuàng)建多個工作表，可以多次調(diào)用該方法，并將它們添加到工作簿對象中。
將工作表添加到工作簿通過 xlsx 庫的 utils.book_append_sheet() 方法將創(chuàng)建好的工作表添加到工作簿對象中。
導出數(shù)據(jù) 通過 xlsx 庫的 writeFile() 方法將工作簿對象導出為 Excel 文件。你可以指定導出的文件名和文件格式，比如 .xlsx 或 .csv。

以下是一個使用 xlsx 庫將數(shù)據(jù)導出為 Excel 文件的示例代碼：

vue

<script setup>
import * as XLSX from "xlsx/xlsx.mjs";
const download = () => {
  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數(shù)據(jù)

使用input type="file"選擇xlsx文件
使用fileReader讀取文件為二進制編碼
XLSX.read方法處理二進制編碼為worksheet對象
XLSX.utils.sheet_to_json轉換worksheet對象為json數(shù)據(jù)，實際上就是js數(shù)組
最后處理數(shù)組數(shù)據(jù)為自己想要的格式即可

<template>
  <article>
    <p>導入高德地圖xlsx文件</p>
    <input type="file" ref="upload" accept=".xls,.xlsx" />
  </article>
</template>
<script>
import XLSX from "xlsx"
export default {
  mounted() {
    // 監(jiān)聽表格導入事件
    this.$refs.upload.addEventListener("change", e => {
      this.readExcel(e)
    })
  },
  methods: {
    readExcel(e) {
      //表格導入
      const files = e.target.files
      //如果沒有文件名，不往下執(zhí)行
      if (files.length <= 0) return
      // 上傳文件格式不正確,非xls或者xlsx格式文件，不往下執(zhí)行
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) return
      const fileReader = new FileReader()
      // readAsBinaryString將文件讀取為二進制編碼
      fileReader.readAsBinaryString(files[0])
      // 讀取完成
      fileReader.onload = ev => {
        try {
          // 二進制數(shù)據(jù)
          const data = ev.target.result
          // xlsx處理二進制數(shù)據(jù)
          const workbook = XLSX.read(data, {
            type: "binary"
          })
          //取第一張表
          const wsname = workbook.SheetNames[0] 
          // 根據(jù)表格內(nèi)容生成json數(shù)據(jù)
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) 
          const outputs = [] //清空接收數(shù)據(jù)
          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/

可以調(diào)節(jié)背景色、字體樣式、border

npm i -s xlsx-js-style

<script setup>
import XLSX from "xlsx-js-style";
console.log();
const download = () => {
  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生成頭部

所以如下數(shù)據(jù)格式不加上skipHeader: true,會出現(xiàn)0 1 2的索引頭部

<script setup>
import XLSX from "xlsx-js-style";
const download = () => {
  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>
import XLSX from "xlsx-js-style";
const download = () => {
  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>
import XLSX from "xlsx-js-style";
const download = () => {
  const data = [
    { 姓名: "張三", 年齡: 18, 性別: "男" },
    { 姓名: "李四", 年齡: 20, 性別: "女" },
    { 姓名: "王五", 年齡: 22, 性別: "男" },
  ];
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(data);
  // s 表示要合并的單元格范圍的左上角單元格，r 表示該單元格的行號，c 表示該單元格的列號，行列號從 0 開始計數(shù)。所以 { 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 列之間的元格。
  // 注意，合并會以開始位置單元格中的內(nèi)容為準，所以合并后的單元格中的內(nèi)容為 A1 單元格中的內(nèi)容。
  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>

到此這篇關于vue導入導出excel、設置單元格背景色、文字居中、合并單元格、設置列寬（使用xlsx庫和xlsx-style庫）的文章就介紹到這了,更多相關vue導入導出excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: