Briefly
SheetJS is a very useful front-end tool for processing table files. It is divided into community edition and professional edition. Today we will introduce how to use its community edition easily.
SheetJS Community Edition official website
introduce
You should open the official website to browse the specific usage details.
Install
Open the official website and you can find the usage of various running modules in the Installation section as shown above.
Generally, projects are maintained by module management and packaging tools such as webpack or vite, so let's look at the modules in the picture above.
Take npm as an example
npm i --save https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz
After success, as shown below:
use
Once installed, the library can be imported under the name xlsx:
import {
read, writeFileXLSX } from "xlsx";
If you need XLS support, you must manually import cpexcel.full.mjs:
/* load the codepage support library for extended support with older formats */
import {
set_cptable } from "xlsx";
import * as cptable from 'xlsx/dist/cpexcel.full.mjs';
set_cptable(cptable);
import excel
Take vue as an example, the detailed document is as shown in the figure below. If you use a framework in other directions based on vue, such as (Nuxt), you can refer to the corresponding documentation.
SheetJs has two methods for parsing excel data, read(data, options) and readFile(filename, options).
// 直接解析数据
XLSX.read(data, read_opts)
// 根据文件名解析数据
XLSX.readFile(filename, read_opts)
The most commonly used method is the XLSX.read(data, read_opts) method, which can directly parse data stored in JS strings, "binary strings", Node.js buffers or typed arrays (Uint8Array or ArrayBuffer).
- Get the data and convert the data into a type that can be read by the read() method
- Read the data, and the data will be output in the form of an object.
- Finally, you can use the official implemented tool function or custom processing function
Here is an example:
<template>
<div>
<input
id="inputFile"
type="file"
accept=".xlsx,.xls,.csv"
@change="change"
/>
</div>
</template>
<script>
import * as XLSX from 'xlsx'
export default {
props: {
// 表格数据
sheetsContent: {
type: Object,
default: () => {
return {
}
}
}
},
emits: ['success', 'update:sheetsContent'],
data() {
return {
context: ''
}
},
methods: {
change(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = re => {
const data = re.target.result
this.$emit('sucess', data)
const zzexcel = XLSX.read(data, {
type: 'binary'
})
console.log(zzexcel)
this.$emit('update:sheetsContent', zzexcel)
// 将表中的数据以json格式输出
// 常见的有 sheet_to_html 、sheet_to_csv等
const content = XLSX.utils.sheet_to_json(zzexcel.Sheets.Sheet1)
console.log(content)
this.context = content
}
}
}
}
</script>
<style></style>
export excel
Exporting excel requires a source data object, and then the excel file can be exported.
There are three export methods:
- XLSX.write(workbook,opts) : Generate spreadsheet bytes (file) from data. The write method attempts to pack data into a file in memory. By default, an XLSX file is generated, but this can be controlled via the bookType property of the opts parameter. Depending on the type option, data can be stored as "binary string", JS string, Uint8Array or buffer.
- XLSX.writeFile(workbook,filename,opts) : Generates and attempts to save a file. The export file format is determined by the extension of the filename (SheetJS.xlsx signal XLSX export, SheetJS.xlsb signal XLSB export, etc.).
- XLSX.writeFileXLSX(workbook,filename,opts) : Generates and attempts to save an XLSX file.
Example:
<template>
<div>
<table class="table-box">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="background:#000;color:#fff">2</td>
</tr>
</tbody>
</table>
<button @click="exportFile">导出</button>
</div>
</template>
<script>
import * as XLSX from 'xlsx'
export default {
props: {
// 表格数据
sheetsContent: {
type: Object,
default: () => {
return {
}
}
}
},
emits: ['success', 'update:sheetsContent'],
data() {
return {
context: ''
}
},
methods: {
exportFile() {
const tableDom = document.querySelector('.table-box')
const workbook = XLSX.utils.table_to_book(tableDom)
console.log(workbook)
// 文件名带后缀
XLSX.writeFileXLSX(workbook, '表1.xlsx')
}
}
}
</script>
<style></style>
the code
<template>
<div>
<input
id="inputFile"
type="file"
accept=".xlsx,.xls,.csv"
@change="change"
/>
<table class="table-box">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="background:#000;color:#fff">2</td>
</tr>
</tbody>
</table>
<button @click="exportFile">导出</button>
</div>
</template>
<script>
import * as XLSX from 'xlsx'
export default {
props: {
// 表格数据
sheetsContent: {
type: Object,
default: () => {
return {
}
}
}
},
emits: ['success', 'update:sheetsContent'],
data() {
return {
context: ''
}
},
methods: {
change(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = re => {
const data = re.target.result
this.$emit('sucess', data)
const zzexcel = XLSX.read(data, {
type: 'binary'
})
console.log(zzexcel)
this.$emit('update:sheetsContent', zzexcel)
const content = XLSX.utils.sheet_to_json(zzexcel.Sheets.Sheet1)
console.log(content)
this.context = content
}
},
exportFile() {
const tableDom = document.querySelector('.table-box')
const workbook = XLSX.utils.table_to_book(tableDom)
console.log(workbook)
// 文件名带后缀
XLSX.writeFileXLSX(workbook, '表1.xlsx')
}
}
}
</script>
<style></style>
epilogue
it's over