SheetJS参考文章：https://xlsx.nodejs.cn/docs/demos/cloud/salesforce Salesforce LWC 实现上传Excel解析其内容：https://cloud.tencent.com/developer/article/1803271
一、介绍SheetJS
SheetJS 是一个非常流行的 JavaScript 库，主要用于处理电子表格文件（如 Excel 文件）。它的功能包括读取、编辑、生成和写入各种格式的电子表格文件，支持 Excel 的 .xlsx、.xls 文件以及其他类似的表格文件格式（如 .csv、.ods 等）。
1. SheetJS 的主要功能：
1） 读取电子表格：
可以从本地文件或通过网络获取的文件中读取数据，并将其解析为 JavaScript 对象。
支持多种文件格式，如 .xlsx、.xls、.csv、.ods 等
2） 生成电子表格：
以通过代码动态创建电子表格，并导出为不同的文件格式。
支持复杂的表格结构，如合并单元格、嵌套表格等。
3） 编辑电子表格：
读取已有的表格文件后，可以修改表格中的内容，然后保存回去。
4）导出和下载：
可以将处理后的数据导出为各种电子表格文件格式，并提供下载链接。
2. 典型使用场景：
- 数据导入/导出：在企业级应用中，经常需要导入和导出数据，SheetJS 提供了强大的工具来实现这一点。
- 数据分析：可以读取用户上传的 Excel 文件，进行数据解析和分析，然后展示结果。
- 报表生成：根据系统中的数据生成复杂的报表，并导出为 Excel 文件供用户下载。
3.为什么使用 SheetJS？
- 兼容性强：支持多种电子表格文件格式。
- 易于集成：适用于浏览器、Node.js 环境等，容易与前后端框架集成。
- 丰富的功能：支持多种操作，如读取、编辑、写入、格式转换等，满足大多数电子表格操作需求。
二、如何使用SheetJS
首先在vscode中创建好LWC组件
1.添加 SheetJS：
方法1：Download https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js
方法2：终端运行命令
代码语言：txt复制curl -o xlsx.full.min.js https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js2.将文件移至 force-app/main/default/staticresources/ 文件夹并将文件重命名为 sheetjs.js
如果文件是从上一个命令下载的，mv 可以移动并重命名：
代码语言：txt复制mv xlsx.full.min.js force-app/main/default/staticresources/sheetjs.js3.使用以下 XML 创建 force-app/main/default/staticresources/sheetjs.resource-meta.xml（在步骤 2 的文件夹中的 sheetjs.resource-meta.xml）
代码语言：txt复制<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
<cacheControl>Private</cacheControl>
<contentType>application/javascript</contentType>
</StaticResource>4.再次部署项目Depoly this source to org，并确认Static Resources是否有sheetjs文件
A) 在 Salesforce 站点中，单击页面右上角的齿轮图标，然后选择 "设置"（当前应用的设置）。
¥A) In the Salesforce site, click on the gear icon in the top-right corner of the page and select "Setup" (Setup for current app).
B) 在左侧边栏搜索框中输入 "静止的"。点击 "静态资源"
¥B) Type "Static" in the left sidebar search box. Click "Static Resources"
5.粘贴以下代码：
代码语言：txt复制import { LightningElement, track } from 'lwc';
import sheetJS from '@salesforce/resourceUrl/sheetJS';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ExcelImportForLwc extends LightningElement {
@track dataList = [];
@track disableButton = true;
connectedCallback() {
loadScript(this, sheetJS).then(() => {
console.log('加载 sheet JS完成');
this.disableButton = false;
});
}
excelFileToJson(event) {
event.preventDefault();
let files = event.target.files;
const analysisExcel = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
analysisExcel(files[0]).then((result) => {
let datas = []; // 存储获取到的数据
let XLSX = window.XLSX;
let workbook = XLSX.read(result, {
type: 'binary',
});
for (let sheet in workbook.Sheets) {
if (
Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)
) {
datas = datas.concat(
XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
);
}
}
this.dataList = datas;
const toastEvent = new ShowToastEvent({
variant: 'success',
message: '文件已经上传解析成功',
});
this.dispatchEvent(toastEvent);
});
}
a
printResult() {
console.log(JSON.stringify(this.dataList));
}
}<template>
<lightning-input type="file" label="上传" onchange={excelFileToJson} disabled={disableButton} accept="xlsx"
multiple="false"></lightning-input>
<lightning-button label="打印结果" onclick={printResult} disabled={disableButton}></lightning-button>
</template>6.将组件部署到页面上
点击打印结果在控制台中查看内容
