Salesforce LWC 实现上传Excel解析其内容

朝夕

发布于 2024-08-21 11:41:51

970

发布于 2024-08-21 11:41:51

文章被收录于专栏：Salesforce LWC

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：终端运行命令

curl -o xlsx.full.min.js https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js

2.将文件移至 force-app/main/default/staticresources/ 文件夹并将文件重命名为 sheetjs.js

如果文件是从上一个命令下载的，mv 可以移动并重命名：

mv xlsx.full.min.js force-app/main/default/staticresources/sheetjs.js

3.使用以下 XML 创建 force-app/main/default/staticresources/sheetjs.resource-meta.xml（在步骤 2 的文件夹中的 sheetjs.resource-meta.xml）

<?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.粘贴以下代码：

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.将组件部署到页面上