Article directory
1. The js library based on xlsx reads and generates excel files
- Can be used to generate and read excel sheets
- Both the front end and the node end can be used
- Support cell merging
- Support array data and object format data to generate excel, html, csv files
- Reference blog: https://blog.csdn.net/lgd1917/article/details/122449774
- There are detailed tutorials and related APIs on npm
2. Download
-
cdn
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> -
is module
yarn add xlsx -
introduce
import * as XLSX from 'xlsx' -
node
const XLSX = require('xlsx')
3. Read excel content
- Upload the excel file and read the content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="excel-file">
</body>
</html>
<script src="xlsx.core.min.js"></script>
<script>
const excelDom = document.getElementById('excel-file')
excelDom.onchange = function(e) {
var files = e.target.files; // 文件对象
var fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result// 文件内容
const workbook = XLSX.read(data, {
type: 'binary'
}) // 以二进制流方式读取得到整份excel表格对象
console.log('111222333',workbook)
} catch (e) {
console.log('文件类型不正确');
return;
}
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
};
</script>
4. Front-end export excel file
- Click the button to export the excel file
- Support array data and object format data
- Merge Cells
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="excelDownload()">点击下载</button>
</body>
</html>
<script src="xlsx.core.min.js"></script>
<script>
function excelDownload(){
const arrData = [
['姓名','年龄','性别'],
['剌世勇','25','男'],
['王小明','36','女'],
['王小红','72','人妖']
]
const jsonData = [
{
A:"表头1", B:"表头2", C:"表头3", D:"表头4", E:"表头5", F:"表头6", G:"表头7" },
{
A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
{
A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
]
const jsonOptions = {
skipHeader:true // 默认会用object key作为表头,true 不输出表头
}
var workbook = XLSX.utils.book_new(); // 创建一个工作簿 // 可以比作一个excel文件
var worksheet1 = XLSX.utils.aoa_to_sheet(arrData); // 添加数据到sheet表中 生成 sheet 表
var worksheet2 = XLSX.utils.json_to_sheet(jsonData,jsonOptions);
worksheet2['!merges'] = [
// 设置A1-C1的单元格合并
{
s: {
//s为开始
c: 0, // 开始列
r: 0 // 开始行
},
e: {
//e结束
c: 2, // 结束列
r: 0 // 结束行
}
}
];
XLSX.utils.book_append_sheet(workbook, worksheet1, 'sheet_name_1');// 将sheet表添加到工作簿中,可以添加多个
XLSX.utils.book_append_sheet(workbook, worksheet2, 'sheet_name_2');
var wopts = {
// 要生成的文件类型
bookType: 'xlsx',
bookSST: false,
type: 'array'
};
var wbout = XLSX.write(workbook, wopts); // 将工作簿 以二进制写进内存中//生成文件数据
const blob = new Blob([wbout]); // 生成 blob对象
const url = URL.createObjectURL(blob);// 创建一个url 用于 a链接下载
const aDom = document.createElement('a') // 创建a标签
aDom.href = url; // 指向下载地址
// 指定download属性为下载
aDom.download="xx.xlsx" // 指定下载文件名称 // 指明文件后缀 否则会是txt文件
// 自动触发点击事件
aDom.click()
}
</script>
5. Generate execl file on node side
var XLSX = require("xlsx");
const path = require('path')
function excelDownload(){
const arrData = [
['姓名','年龄','性别'],
['剌世勇','25','男'],
['王小明','36','女'],
['王小红','72','人妖']
]
const jsonData = [
{
A:"表头1", B:"表头2", C:"表头3", D:"表头4", E:"表头5", F:"表头6", G:"表头7" },
{
A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
{
A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
]
const jsonOptions = {
skipHeader:true // 默认会用object key作为表头,true 不输出表头
}
var workbook = XLSX.utils.book_new(); // 创建一个工作簿 // 可以比作一个excel文件
var worksheet1 = XLSX.utils.aoa_to_sheet(arrData); // 添加数据到sheet表中 生成 sheet 表
var worksheet2 = XLSX.utils.json_to_sheet(jsonData,jsonOptions);
worksheet2['!merges'] = [
// 设置A1-C1的单元格合并
{
s: {
//s为开始
c: 0, // 开始列
r: 0 // 开始行
},
e: {
//e结束
c: 2, // 结束列
r: 0 // 结束行
}
}
];
XLSX.utils.book_append_sheet(workbook, worksheet1, 'sheet_name_1');// 将sheet表添加到工作簿中,可以添加多个
XLSX.utils.book_append_sheet(workbook, worksheet2, 'sheet_name_2');
var wopts = {
// 要生成的文件类型
bookType: 'xlsx',
bookSST: false,
type: 'array'
};
const _path = path.resolve(__dirname,'xx.xlsx')
// XLSX.writeFile(workbook, _path,wopts); //同步写入 将工作簿 以二进制写进文件中
XLSX.writeFileAsync(_path, workbook,wopts, (...arr) =>{
// 异步写入文件
console.log('112233',arr)
})
}
excelDownload()