spfm-market-front/src/pages/main/performance/components/sheet.vue

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-12-04 14:23:58
 * @LastEditors  : yuanrunwei
 * @LastEditTime : 2021-12-04 15:38:33
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\sheet.vue
-->

<template>
    <div class="sheet-container">
        <el-upload action :on-change="handleChange" :show-file-list="false">
            <el-button size="mini" type="success">上传</el-button>
        </el-upload>
        <div id="luckysheet" class="sheet-container-block"></div>
    </div>
</template>

<script>
import XLSX from "xlsx";
import luckyexcel from "luckyexcel";
export default {
    data() {
        return {};
    },
    methods: {
        handleInit() {},
        handleCreate(file) {
            luckyexcel.transformExcelToLucky(file, (export_json) => {
                var options = {
                    container: "luckysheet",
                    data: export_json.sheets,
                    title: export_json.info.name,
                    userInfo: export_json.info.name.creator,
                };
                window.luckysheet.create(options);
            });
        },
        async handleChange(response) {
            this.handleCreate(response.raw);
            let binary = await this.handleFile(response.raw);
            let workbook = XLSX.read(binary, {
                type: "binary",
                cellDates: true,
            });
            let sheet = workbook.Sheets[workbook.SheetNames[0]];
            const data = XLSX.utils.sheet_to_json(sheet);
            this.handleCreate(data);
        },
        handleFile(file) {
            return new Promise((resolve) => {
                let reader = new FileReader();
                reader.readAsBinaryString(file);
                reader.onload = (event) => {
                    resolve(event.target.result);
                };
            });
        },
    },
    mounted() {
        this.handleInit();
    },
};
</script>

<style lang="scss" scope>
.sheet-container {
    position: relative;
    width: 1200px;
    height: 500px;
    &-block {
        position: absolute;
        width: calc(100% - 40px);
        height: 100%;
    }
}
</style>