Web编程入门 2.2 读取Excel与XML中的参数

(1)读取Excel中的参数

需要引入外部文件，从github找到xlsx.core.min.js，下载并引入

然后在HTML中设置上传控件

<input type="file" id="excel-file">

然后监听控件改变事件

$('#excel-file').change(function(e) {
    var files = e.target.files;
    var fileReader = new FileReader();
    fileReader.onload = function(ev) {
      try {
        var data = ev.target.result,
          workbook = XLSX.read(data, {
            type: 'binary'
          }), // 以二进制流方式读取得到整份excel表格对象
          persons = []; // 存储获取到的数据
      } catch (e) {
        console.log('加载EXCEL 文件出错!');
        return;
      }

      // 表格的表格范围，可用于判断表头是否数量是否正确
      var fromTo = '';
      // 遍历每张表读取
      for (var sheet in workbook.Sheets) {
        if (workbook.Sheets.hasOwnProperty(sheet)) {
          fromTo = workbook.Sheets[sheet]['!ref'];
          console.log(fromTo);
          persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
          // break; // 如果只取第一张表，就取消注释这行
        }
      }
      
    };

    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);

  });

最终得到的persons就是对应的参数集合。

 

(2)读取XML中的参数

使用ajax方法即可访问到xml文件，但是在访问xml文件之前需要得到文件的url地址，因此先要对地址进行读取，然后就可以访问到对应地址的XML文件。

 $('#fileField').change(function(e) {
    var url = null;
    var fileObj = document.getElementById("fileField").files[0];
    if (window.createObjcectURL != undefined) {
      url = window.createOjcectURL(fileObj);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(fileObj);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(fileObj);
    }    
    $.ajax({
      url: url,
      dataType: 'xml',
      type: 'GET',
      async:false,
      error: function(xml)
      {
        alert("加载XML 文件出错!");
      },
      success: function(xml)
      {
        $(xml).find("e").each(function(i)
        {          
          var orderid = $(this).children("订单ID").text();        
          var clothid = $(this).children("订购产品ID").text();
          var clothamount = $(this).children("订购数量").text();
          //var buckle = $(this).children("buckle").text();
          console.log(orderid+"  "+clothid+"  "+clothamount);

        });       
        fillformbyxml(xml);
      }
    });
  });