js 实现的excel解析和预览

Posted 2021-03-15 玉龙小主

<link href="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<link href="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/css/fileinput-rtl.min.css" rel="stylesheet">
<script src="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>

<script src="${rc.contextPath}/res/excel/jexcel/jexcel.js"></script>
<link  href="${rc.contextPath}/res/excel/jexcel/jexcel.css"   type="text/css" rel="stylesheet"/>
<script src="${rc.contextPath}/res/excel/jsuites/jsuites.js"></script>
<link  href="${rc.contextPath}/res/excel/jsuites/jsuites.css" type="text/css" rel="stylesheet"  />
<script src="${rc.contextPath}/res/excel/sheetjs/dist/xlsx.full.min.js"></script>

//文件预览设置预览按钮和上传的组件保持一致  2020/1/9 zjm
$(‘#cardbin-file‘).on(‘filepreupload‘, function(event, data, previewId, index) {
     $("#cardBinPreviewBtn").css("margin-top","40px");
});

$(‘#cardbin-file‘).on(‘filecleared‘, function(event) { //清理之后文件变为预览，需要重新上传
    $("#cardBinPreviewBtn").css("margin-top","0px");
    $("#cardbinCloudFile").val("");
    $("#cardbinUploadFlag").val("");
    $("#cardBinPreviewBtn").html("Preview");
});
$(‘#cardbin-file‘).on(‘fileuploaderror‘, function(event, data, msg) {
    $("#cardBinPreviewBtn").css("margin-top","0px");
});
//文件预览设置预览按钮和上传的组件保持一致 2020/1/9 zjm

/*卡bin预览开始 2020/01/09 zjm*/

$("#cardBinPreviewBtn").click(function (e) {
       $("#cardBinModal").modal("hide");
       let cardBinFile=$("#cardbin-file").val();
       //let cardBinCloudFile= $("#cardbinCloudFile").val();
       let cardbinUploadFlag=$("#cardbinUploadFlag").val();
       if(cardBinFile=="" && cardbinUploadFlag==""){
           $(‘#carbin-preview‘).empty();
           $("#carbin-preview").html(‘card bin file is blank !‘);
       }
       $("#cardBinPreviewModal").modal("show");
   });

   $(‘#cardBinPreviewModal‘).on(‘shown.bs.modal‘, function () {
       $("body").addClass(‘modal-open‘);
   });

   $("#cardBinPreviewModal").on("hidden.bs.modal", function () {
       $("body").removeClass(‘modal-open‘);
       $("#cardBinModal").modal("show");
   });

/*卡bin预览开始 2020/01/08 zjm*/
$("#cardbin-file").change( function(e) {

    $("#cardBinPreviewBtn").css("margin-top","0px");//控制预览控件的位置
    $("#cardBinPreviewBtn").html("Preview");//重新选择文件提示文件是预览

    let files = e.target.files;
    let fileName=files[0].name;
    let fileExt = fileName.slice(fileName.lastIndexOf(".")+1).toLowerCase();
    if("xls" != fileExt && "xlsx"!=fileExt){
        $("#carbin-preview").html(‘card bin file type is error !‘);
        return ;
    }
    let fileReader = new FileReader();
    fileReader.onload = function(ev) {
        try {
            var data = ev.target.result;
             workbook = XLSX.read(data, {type: ‘binary‘}); // 以二进制流方式读取得到整份excel表格对象
        } catch (e) {
            console.log(‘文件类型不正确‘ + e);
            $("#carbin-preview").html(‘card bin file type is error !‘);
            return;
        }
        let rows=[];
        for (var sheet in workbook.Sheets) {
            if (workbook.Sheets.hasOwnProperty(sheet)) {
                rows = rows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                break; // 如果只取第一张表，就取消注释这行
            }
        }
        debugger
        let tableHeader = Object.keys(rows[0])[0];
        let excelRows=[];
        rows.map((item) => {
            excelRows.push(new Array(item[tableHeader]+""));
        });
       /* let excelRows= new Array();
        excelRows[0]=[tableHeader];
        rows.forEach(function (val,idx,array) {
            arr[idx+1] = new Array();
            arr[idx+1][0]=val[tableHeader];
        });*/
        console.log(excelRows);
        $(‘#carbin-preview‘).empty();
        jexcel( document.getElementById(‘carbin-preview‘),
                { data:excelRows,
                  colHeaders: [tableHeader],
                  colWidths: [310,50,50,50,50],
                  columns: [
                        { type: ‘text‘ },{ type: ‘text‘ },{ type: ‘text‘ },{ type: ‘text‘ },
                        { type: ‘text‘ }
                        ]
                });
    };
    fileReader.readAsBinaryString(files[0]);
});
/*卡bin预览结束*/