zoukankan      html  css  js  c++  java
  • js 实现的excel解析和预览

    <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预览结束*/
     
  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/zjm-1/p/12206992.html
Copyright © 2011-2022 走看看