js实现Excel导入功能

  1. 仅上传Excel文件给后台

    <input  id="articleImageFile" name="excelFile" type="file" class="x-file" onchange="importExcel(this)">
    <button  id="saveZipButton" type="button" class="btn" onclick="document.getElementById('articleImageFile').click();"><i class="fa fa-download"></i>  导入</button>
    
     // 导入功能
    importExcel:function(obj){
       var formData = new FormData();
       var name = $("#articleImageFile").val();
       formData.append("file",$("#articleImageFile")[0].files[0]);
       formData.append("name",name);//可以使用formData.append()传递多个参数
       $.ajax({
           url :   win.utils.services.importPartsList,
           type : 'POST',
           async : false,
           data : formData,
           // 告诉jQuery不要去处理发送的数据
           processData : false,
           // 告诉jQuery不要去设置Content-Type请求头
           contentType : false,
           beforeSend:function(){
               console.log("正在进行,请稍候");
           },
           success : function(result) {
               if(result.result_code==200){
                   utils.showMessage('导入成功!');
                   parts_manage.refresh();
               }
               else if(result.result_code==999){
                   utils.showMessage(result.description+',请重试!');
               }
               else{
                   utils.showMessage('导入失败,请重试!');
               }
           }
       });
    },
    
  2. js解析Excel文件内容之后,上传给后台

    <input  id="articleImageFile" name="excelFile" type="file" class="x-file" onchange="importf(this)">
    <button  id="saveZipButton" type="button" class="btn" onclick="document.getElementById('articleImageFile').click();"><i class="fa fa-download"></i>  导入</button>
    

    需要引入xlsx.full.min.js文件,通过FileReader对象读取文件利用js-xlsx转成json数据。
    xlsx.full.min.js文件下载地址:https://github.com/SheetJS/js-xlsx

    <!--xlsx导入-->
    <script src="../../js/global/xlsx.full.min.js"></script>
    
    importf:function(obj){
            var wb;//读取完成的数据
            var rABS = false; //是否将文件读取为二进制字符串
            console.log(obj);
            var f = obj.files[0];
            console.log(f);
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;
                if(rABS) {
                    wb = XLSX.read(btoa(parts_manage.fixdata(data)), {//手动转化
                        type: 'base64'
                    });
                } else {
                    wb = XLSX.read(data, {
                        type: 'binary'
                    });
                }
                console.log(wb);
                /**
                 * wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                 * wb.Sheets[Sheet名]获取第一个Sheet的数据
                 */
                var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                // document.getElementById("excelContent").innerHTML= JSON.stringify( excelJson );
            };
            if(rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
    
        },
        //文件流转BinaryString
        fixdata:function(data) {
            var o = "",
                l = 0,
                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;
        },
    };
    
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页