javascript - 导入文件预览

Question

我有这个表单可以导入用户的交易。我增强了表单，用户可以在其中预览将导入到其帐户的交易列表。

示例:

上面的示例预览是针对我成功完成的 QIF 文件格式的。

现在我正在尝试预览 OFX 文件格式，但很难将其排列在表格中并获得准确的值。

这是我的代码:

<input type="file" name="transactions" id="id_transactions">

<div style="display:none;width:335px;" id="preview-box">
    <h4 class="thin" class="black">Import Preview</h4>

    <table class="simple-table responsive-table footable">
        <thead>
            <tr>
                <th scope="col" width="10%"><small class="black">Date</small></th>
                <th scope="col" width="10%"><small class="black">Amount</small></th>
                <th scope="col" width="20%"><small class="black">Payee</small></th>
            </tr>
        </thead>
    </table>

    <div class="scrollable" style="height:100px">
        <table class="simple-table responsive-table footable">
            <tbody id="preview-table"></tbody>
        </table>
    </div><br/>
</div> 

<script>
    $('#id_transactions').change(function() {
        var upload = document.getElementById('id_transactions')
        var files = upload.files
        if (files != undefined) {
            var reader = new FileReader();

            reader.onload = function(e) {
                var extension = upload.value.split('.').pop().toLowerCase()
                var lineSplit = e.target.result.split("\n");
                var payee = ''
                var date
                var amount
                var content = "";
                var content1 = "";
                var content2 = "";

                if(extension == "qif"){
                    // for qif preview
                }else if(extension == "ofx"){
                    $('#preview-box').show(500)

                    for(var i = 1; i < lineSplit.length; i++) {
                        //I'm stuck here....
                    }
                }

                $('#preview-table').html(content);
            };
            reader.readAsText(files.item(0));
        }
    });
</script>

样本.ofx

 OFXHEADER:100
DATA:OFXSGML
VERSION:103
SECURITY:NONE
ENCODING:USASCII
CHARSET:1252
COMPRESSION:NONE
OLDFILEUID:NONE
NEWFILEUID:NONE

<OFX>
  <SIGNONMSGSRSV1>
    <SONRS>
      <STATUS>
        <CODE>0
        <SEVERITY>INFO
      </STATUS>
      <DTSERVER>20071015021529.000[-8:PST]
      <LANGUAGE>ENG
      <DTACCTUP>19900101000000
      <FI>
        <ORG>MYBANK
        <FID>01234
      </FI>
    </SONRS>
  </SIGNONMSGSRSV1>
  <BANKMSGSRSV1>
      <STMTTRNRS>
        <TRNUID>23382938
        <STATUS>
          <CODE>0
          <SEVERITY>INFO
        </STATUS>
        <STMTRS>
          <CURDEF>USD
          <BANKACCTFROM>
            <BANKID>987654321
            <ACCTID>098-121
            <ACCTTYPE>SAVINGS
          </BANKACCTFROM>
          <BANKTRANLIST>
            <DTSTART>20070101
            <DTEND>20071015
            <STMTTRN>
              <TRNTYPE>CREDIT
              <DTPOSTED>20070315
              <DTUSER>20070315
              <TRNAMT>200.00
              <FITID>980315001
              <NAME>DEPOSIT
              <MEMO>automatic deposit
            </STMTTRN>
            <STMTTRN>
              <TRNTYPE>CREDIT
              <DTPOSTED>20070329
              <DTUSER>20070329
              <TRNAMT>150.00
              <FITID>980310001
              <NAME>TRANSFER
              <MEMO>Transfer from checking
            </STMTTRN>
            <STMTTRN>
              <TRNTYPE>PAYMENT
              <DTPOSTED>20070709
              <DTUSER>20070709
              <TRNAMT>-100.00
              <FITID>980309001
                <CHECKNUM>1025
              <NAME>John Hancock
            </STMTTRN>
          </BANKTRANLIST>
          <LEDGERBAL>
            <BALAMT>5250.00
            <DTASOF>20071015021529.000[-8:PST]
          </LEDGERBAL>
          <AVAILBAL>
            <BALAMT>5250.00
            <DTASOF>20071015021529.000[-8:PST]
          </AVAILBAL>
        </STMTRS>
      </STMTTRNRS>
  </BANKMSGSRSV1>
</OFX>

有人已经这样做过吗？

更新:

输出:

Answer 1

你知道吗，这种 OFX 文件格式在第二部分中看起来很像 XML，用一个空行分隔两部分(如果我错了，请纠正我，我不知道这种格式)。

在 onload 事件监听器中，尝试如下操作:

var ofxParts = e.result.split("\r?\n\r?\n"), ofxHeaders, ofxDocument;

ofxHeaders = JSON.parse("{"
    + ofxParts[0].replace(/(\w+) *: *(\w*)/g, "\"$1\": \"$2\"")
        .replace(/\r?\n/g, ", ") + "}");

ofxDocument = new DOMParser().parseFromString(ofxParts[1]
        .replace(/<(\w+)>(?!\n|\r\n)(.*)/g, "<$1>$2</$1>"));

现在您应该在有用的 Javascript 对象中拥有 OFX header ，如下所示:

ofxHeaders = {
    "OFXHEADER": "100",
    "DATA": "OFXSGML",
    "VERSION": "103",
    "SECURITY": "NONE",
    "ENCODING": "USASCII",
    "CHARSET": "1252",
    "COMPRESSION": "NONE",
    "OLDFILEUID": "NONE",
    "NEWFILEUID": "NONE"
};

您可以像任何其他 XML 一样使用 document.evaluate 抓取并选择您的 OFX​​ 文档。

只要您使用FileReader，这些都应该可用。 IE10 除外，它不支持 document.evaluate。如果您想使用 XPath，则必须创建一个 ActiveXObject 并使用 loadXML。

或者你可以只使用 jQuery:

var $ofx = $.parseXML(ofxParts[1].replace(/<(\w+)>(?!\n|\r\n)(.*)/g, "<$1>$2</$1>"));

编辑:您现在可以通过以下方式创建表格行:

var $xfers = $ofx.find("STMTTRN");

content = $xfers.map(function(xf) {
    var $xf = $(xf), date = $xf.find("DTPOSTED").text();
    return "<tr><td>" + date.substring(4, 6) + "/" + date.substring(6)
        + "/" + date.substring(0, 4) + "<td></td>" + $xf.find("NAME").text()
        + "</td><td>" + $xf.find("TRNAMT").text() + "</td></tr>";
}).join("");