xlsx
xlsxSheetJSによって開発された Excel ファイルを処理するための npm ライブラリです。
フロントエンド開発者が Excel ファイルのインポートとエクスポートの古典的な要件を実現するのに適しています。
xlsx ファイルと区別し、そのアプリケーション言語を強調するために、このライブラリは通常、js-xlsx
jsデータをExcelファイルとしてエクスポート
次の手順が必要です。
- xlsx ライブラリのインストール npm パッケージ マネージャーを使用して xlsx ライブラリをインストールすることも、xlsx をローカルにダウンロードして、HTML ファイルの script タグを通じてインポートすることもできます。
- データの準備 エクスポートするデータを準備し、配列またはオブジェクトとして保存します。
- ワークブックの作成 xlsx ライブラリの
utils.book_new()メソッド。 - ワークシートの作成 xlsx ライブラリの
utils.json_to_sheet()メソッド、準備したデータをこのメソッドにパラメータとして渡します。複数のワークシートを作成する必要がある場合は、このメソッドを複数回呼び出すことができ、ワークシートがワークブック オブジェクトに追加されます。 - ワークシートをワークブックに追加する xlsx ライブラリのメソッドを使用して、作成したワークシートをワークブック
utils.book_append_sheet()オブジェクト。 - データのエクスポート xlsx ライブラリのメソッドを使用して、ワークブック
writeFile()オブジェクト。エクスポートされるファイル名とファイル形式 (.xlsxや など.csv。
以下は、xlsx ライブラリを使用してデータを Excel ファイルにエクスポートするサンプル コードです。
ビュー
<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データを生成
- input type="file" を使用して xlsx ファイルを選択します
- fileReader を使用してファイルをバイナリ エンコーディングとして読み取る
- XLSX.read メソッドは、バイナリ エンコーディングをワークシート オブジェクトとして処理します。
- XLSX.utils.sheet_to_json は、ワークシート オブジェクトを json データ (実際には js 配列) に変換します。
- 最後に、配列データを必要な形式に処理できます。
<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 ライブラリのフォーク バージョンであり、スタイル定義を追加する xlsx-js-style ライブラリを使用できます。
詳細なスタイルは https://github.com/gitbrent/xlsx-js-style/ で確認できます。
背景色、フォントスタイル、境界線を調整できます
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_sheetObject.keysデフォルトでは、ヘッダーは次を使用して生成されます。
したがって、次のデータ形式が追加されていない場合、インデックスヘッダーskipHeader: trueが表示されます。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 开始计数。所以 { 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>