• 纯前端 vue+ js-xlsx 导入excel表格


    <template>
    <div class="index">
    <input type="file" @change="importFile(this)" id="imFile" style="display: none"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
    <Button type="primary" @click="uploadFile">导入</Button>
    </div>
    </template>

    <script>
    // 引入xlsx
    var XLSX = require("xlsx");
    export default {
    name: "Index",
    data() {
    return {
    fullscreenLoading: false, // 加载中
    imFile: "", // 导入文件el
    errorMsg: "", // 错误信息内容
    };
    },
    mounted() {
    this.imFile = document.getElementById("imFile");
    },
    methods: {
    uploadFile: function() {
    // 点击导入按钮
    this.imFile.click();
    },

    importFile: function() {
    // 导入excel
    this.fullscreenLoading = true;
    let obj = this.imFile;
    if (!obj.files) {
    this.fullscreenLoading = false;
    return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    let $t = this;
    reader.onload = function(e) {
    var data = e.target.result;
    if ($t.rABS) {
    $t.wb = XLSX.read(btoa(this.fixdata(data)), {
    // 手动转化
    type: "base64"
    });
    } else {
    $t.wb = XLSX.read(data, {
    type: "binary"
    });
    }
    let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]]);
    $t.dealFile(json); // analyzeData: 解析导入数据
    };
    if (this.rABS) {
    reader.readAsArrayBuffer(f);
    } else {
    reader.readAsBinaryString(f);
    }
    },
    dealFile: function(data) {
    // 处理导入的数据
    console.log(data);
    this.imFile.value = "";
    this.fullscreenLoading = false;
    if (data.length <= 0) {
    this.errorMsg = "请导入正确信息";
    } else {
    //导入成功,处理数据
    this.$http.post("collector/import", data).then(
    function(response) {
    if (response.body.status == 1) {

    } else {
    if (response.body.status == "10101") {
    this.$Message.info("未登录");
    this.$router.push("/");
    }
    this.$Message.info(response.body.message);
    }
    },
    function() {}
    );
    }
    },

    fixdata: function(data) {
    // 文件流转BinaryString
    var o = "";
    var l = 0;
    var w = 10240;
    for (; l < data.byteLength / w; ++l) {
    o += String.fromCharCode.apply(
    null,
    new Uint8Array(data.slice(l * w, l * w + w))
    );
    }
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
    }
    }
    };
    </script>


  • 相关阅读:
    node.js基础回顾
    PHP基础回顾之表单(二)
    PHP基础回顾(一)
    知识图谱Knowledge Graph
    Qt addStretch()详解
    Qt实现 QQ好友列表QToolBox
    Qt5
    用户级线程和内核级线程
    TCP状态转换图、滑动窗口、半连接状态、2MSL
    理解tcp顺序释放操作和tcp的半关闭
  • 原文地址:https://www.cnblogs.com/weiyuanquyu/p/9811581.html
Copyright © 2020-2023  润新知