专栏首页salesforce零基础学习Salesforce LWC学习(三十二)实现上传 Excel解析其内容

Salesforce LWC学习(三十二)实现上传 Excel解析其内容

本篇参考: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场景处理等等。感兴趣的自行完善。篇中有错误地方欢迎指出,有不懂欢迎留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容

    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

    用户1169343
  • Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_s...

    用户1169343
  • Salesforce LWC学习(二) helloWorld程序在VSCode中的实现

    上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注...

    用户1169343
  • Salesforce LWC学习(四) 父子component交互 / component声明周期管理 / 事件处理

    我们在上篇介绍了 @track / @api的区别。在父子 component中,针对api类型的变量,如果声明以后就只允许在parent修改,son comp...

    用户1169343
  • Salesforce LWC学习(二十三) Lightning Message Service 浅谈

    https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specia...

    用户1169343
  • Salesforce LWC学习(十二) Dependence Picklist实现

    Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference

    用户1169343
  • Salesforce LWC学习(十八) datatable展示 image

    https://developer.salesforce.com/docs/component-library/bundle/lightning-datatab...

    用户1169343
  • Salesforce LWC学习(二十五) Jest Test

    https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-compon...

    用户1169343
  • Salesforce LWC学习(二十一) Error浅谈

    本篇参考:https://developer.salesforce.com/docs/component-library/documentation/en/lw...

    用户1169343
  • Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了

    背景: 我们现在项目越来越多的使用 lwc 进行了前端开发,当然我们知道lwc并不能所有的场景都支持自己玩,比如组件之间的navigation、 quick a...

    用户1169343
  • Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了

    背景: 我们现在项目越来越多的使用 lwc 进行了前端开发,当然我们知道lwc并不能所有的场景都支持自己玩,比如组件之间的navigation、 quick a...

    冬夜先生
  • Salesforce LWC学习(三十三) lightning-datatable 翻页bug处理

    本来lightning-datatable这种标签,基本上任何的项目都会用到而且很精通,所以当时感觉没有太大的单独一篇写的必要,在Salesforce LWC学...

    用户1169343
  • Salesforce LWC学习(十五) Async 以及 Picklist 公用方法的实现

    本篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type)

    用户1169343
  • Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference

    上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法,但是很多没有细节的展开。其实LWC中针对这些modu...

    用户1169343
  • Salesforce LWC学习(二十七) File Upload

    https://developer.salesforce.com/docs/component-library/bundle/lightning-file-up...

    用户1169343
  • Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置

    之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作。之前的内容中也有提到wire注解,今天就详细的介绍一下对数...

    用户1169343
  • Salesforce LWC学习(一)Salesforce DX配置

    最开始做salesforce开发时使用eclipse,后来因为太笨重以及不太方便所以改用了sublime + haoide。sublime + haoide无...

    用户1169343
  • salesforce零基础学习(九十六)Platform Event浅谈

    本篇参考:https://developer.salesforce.com/blogs/2018/07/which-streaming-event-do-i-u...

    用户1169343
  • Aura Component Skills & Tools

    本篇参考: https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_vf_funda...

    用户1169343

扫码关注云+社区

领取腾讯云代金券