导入文件预览

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>

sample.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头，如下所示：

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。如果要使用ActiveXObject，则必须创建XPath并使用XPath。

或者您只需使用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("");