标签：XLSX Salesforce sheet import Excel let reader LWC 上传

本篇参考：salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容

上一篇我们写了aura方式上传excel解析其内容。lwc作为salesforce的新宠儿，逐渐的在去aura化，这种功能怎么能lwc不搞一份，所以本篇来了，直接上代码。

excelImportForLwc.html

<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>

excelImportForLwc.js：因为 loadScript是一个 Promise操作，不是瞬间同步的操作，所以初始化先给按钮disable掉，加载完js资源以后启用。

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 (workbook.Sheets.hasOwnProperty(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);
        });
    }

    printResult() {
        console.log(JSON.stringify(this.dataList));
    }
}

效果展示：

1. 上传按钮点击上传成功以后展示 toast

2. 点击打印结果按钮console出来excel内容

总结：lwc调用区别就是声明一个 Promise，在Promise里面通过 FileReader的onload去进行处理。处理方式和aura相同，只是部分写法区别。篇中仍然有很多没有优化，包括文件大小限制，error场景处理等等。感兴趣的自行完善。篇中有错误地方欢迎指出，有不懂欢迎留言。

标签：XLSX,Salesforce,sheet,import,Excel,let,reader,LWC,上传
来源： https://www.cnblogs.com/zero-zyq/p/14548676.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。