导入EXCEL（可读取json）

Posted 2021-09-04 yinuo_2

此处为需要插件

• xlsx
• 此处为vue父组件引入方法

    // import excel from "./components/upload-excel.vue";
    // <excel v-on:getResult="updateExcel"></excel>

此处为编辑好的vue组件

<template>
    <div>
        <span>
            <input class="input-file" hidden="hidden" type="file" @change="exportData"
                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
            <a-button class="m-x-10" type="primary" @click="btnClick">
                导入
            </a-button>
        </span>
    </div>
</template>

<script>
    //图标组件要单独引入
    import { defineComponent, reactive, onMounted, toRefs, computed } from "vue";
    // import { UpOutlined, DownOutlined } from \'@ant-design/icons-vue\';
    // import { message } from \'ant-design-vue\';
    // import { useStore } from \'vuex\';
    // import { useApi } from \'@/common/utils/api\';
    export default defineComponent({
        components: {},
        setup(props, context) {
            const data = reactive({});
            const methods = {
                btnClick() {
                    document.querySelector(".input-file").click();
                    //
                },
                exportData(event) {
                    if (!event.currentTarget.files.length) {
                        return;
                    }
                    // 拿取文件对象
                    const f = event.currentTarget.files[0];
                    // 用FileReader来读取
                    const reader = new FileReader();
                    // 重写FileReader上的readAsBinaryString方法
                    FileReader.prototype.readAsBinaryString = function (f) {
                        let binary = "";
                        let wb; // 读取完成的数据
                        let outdata; // 你需要的数据
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
                            const bytes = new Uint8Array(reader.result);
                            const length = bytes.byteLength;
                            for (let i = 0; i < length; i++) {
                                binary += String.fromCharCode(bytes[i]);
                            }
                            // 接下来就是xlsx了，具体可看api
                            //下行必须加上，否者报错
                            // eslint-disable-next-line @typescript-eslint/no-var-requires
                            const XLSX = require("xlsx");
                            wb = XLSX.read(binary, {
                                type: "binary",
                            });
                            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                            // 自定义方法向父组件传递数据
                            // console.log("outdata = " + JSON.stringify(outdata));
                            // console.log(outdata);
                            context.emit("getResult", outdata);
                        };
                        reader.readAsArrayBuffer(f);
                    };
                    reader.readAsBinaryString(f);
                },
            };
            return {
                ...toRefs(data),
                ...methods,
            };
        },
    });
</script>