导入EXCEL(可读取json)

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>
阅读 387

2 声望
0 粉丝
0 条评论
2 声望
0 粉丝
文章目录
宣传栏