javascript - 读取外部 .msg 文件并解析它时出错

标签 javascript jquery

我正在使用这个library为了读取 .msg 文件。这工作正常，但我想使用外部 url .msg 文件。

在库中，他们使用输入类型文件来获取文件:

var selectedFile = this.files[0];

我想从 url 获取文件，所以我的代码是:

 <script>
    var oReq = new XMLHttpRequest();
    oReq.open("GET", "https://www.example.net/1564221393.msg", true);
    oReq.responseType = "arraybuffer";
    oReq.onload = function(oEvent) {
        var blob = oReq.response;
        blob.name = "lead-100-1564221393.msg";
    }
    oReq.send();

    var selectedFile = blob;
</script>

我想将文件保存到变量selectedFile，因此我可以在之后使用相同的代码。

请参阅下面的完整代码:

function isSupportedFileAPI() {
  return window.File && window.FileReader && window.FileList && window.Blob;
}

function formatEmail(data) {
  return data.name ? data.name + " [" + data.email + "]" : data.email;
}

function parseHeaders(headers) {
  var parsedHeaders = {};
  if (!headers) {
    return parsedHeaders;
  }
  var headerRegEx = /(.*)\: (.*)/g;
  while (m = headerRegEx.exec(headers)) {
    // todo: Pay attention! Header can be presented many times (e.g. Received). Handle it, if needed!
    parsedHeaders[m[1]] = m[2];
  }
  return parsedHeaders;
}

function getMsgDate(rawHeaders) {
  // Example for the Date header
  var headers = parseHeaders(rawHeaders);
  if (!headers['Date']) {
    return '-';
  }
  return new Date(headers['Date']);
}

$(function() {
  if (isSupportedFileAPI()) {
    $('#verifyIt').click(function() {
      ///// Read external file /////

      var oReq = new XMLHttpRequest();
      oReq.open("GET", "https://itcoinbay.lasthash.com/10e9651b698fb705c57195d112f40678-1563518398.msg", true);
      oReq.responseType = "arraybuffer";
      oReq.onload = function(oEvent) {
        var blob = oReq.response;
        blob.name = "10e9651b698fb705c57195d112f40678-1563518398.msg";

        // Put your line here, you can use blob directly
        var selectedFile = blob;
      }
      oReq.send();

      if (!selectedFile) {
        $('.msg-info, .incorrect-type').hide();
        return;
      }
      if (selectedFile.name.indexOf('.msg') == -1) {
        $('.msg-info').hide();
        $('.incorrect-type').show();
        return;
      }
      $('.msg-example .msg-file-name').html(selectedFile.name);
      $('.incorrect-type').hide();

      // read file...
      var fileReader = new FileReader();
      fileReader.onload = function(evt) {

        var buffer = evt.target.result;
        var msgReader = new MSGReader(buffer);
        var fileData = msgReader.getFileData();
        if (!fileData.error) {
          $('.msg-example .msg-from').html(formatEmail({
            name: fileData.senderName,
            email: fileData.senderEmail
          }));

          $('.msg-example .msg-to').html(jQuery.map(fileData.recipients, function(recipient, i) {
            return formatEmail(recipient);
          }).join('<br/>'));
          $('.msg-example .msg-date').html(getMsgDate(fileData.headers));
          $('.msg-example .msg-subject').html(fileData.subject);
          $('.msg-example .msg-body').html(
            fileData.body ? fileData.body.substring(0, Math.min(500, fileData.body.length)) +
            (fileData.body.length > 500 ? '...' : '') : '');
          if (fileData.bodyHTML) {
            $('.msg-example .msg-body-html').html(fileData.bodyHTML).closest('div.field-block').show();
          } else {
            $('.msg-example .msg-body-html').closest('div.field-block').hide();
          }
          $('.msg-example .msg-attachment').html(jQuery.map(fileData.attachments, function(attachment, i) {
            var file = msgReader.getAttachment(i);
            var fileUrl = URL.createObjectURL(new File([file.content], attachment.fileName, {
              type: attachment.mimeType ? attachment.mimeType : "application/octet-stream"
            }));
            return attachment.fileName + ' [' + attachment.contentLength + 'bytes]' +
              (attachment.pidContentId ? '; ID = ' + attachment.pidContentId : '') +
              '; <a href="' + fileUrl + '">Download</a>';
          }).join('<br/>'));
          $('.msg-info').show();

          // Use msgReader.getAttachment to access attachment content ...
          // msgReader.getAttachment(0) or msgReader.getAttachment(fileData.attachments[0])
        } else {
          $('.msg-info').hide();
          $('.incorrect-type').show();
        }
      };
      fileReader.readAsArrayBuffer(selectedFile);
    });
  } else {
    $('.msg-example').hide();
    $('.file-api-not-available').show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 <script src="https://crm.primalead.com/public/js/DataStream.js"></script>
 <script src="https://crm.primalead.com/public/js/msg.reader.js"></script>
 <button id="verifyIt">Verify It</button>
<div class="form-group">
  <div class="msg-info" style="display: none;">
    <div class="info-box wizard-msg">
      2. MSG info (<span class="msg-file-name"></span>)
    </div>
    <div class="field-block">
      <div class="field-label">From</div>
      <div class="msg-from"></div>
    </div>
    <div class="field-block">
      <div class="field-label">To</div>
      <div class="msg-to"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Date (from Headers, example)</div>
      <div class="msg-date"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Subject</div>
      <div class="msg-subject"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Body</div>
      <div class="msg-body"></div>
    </div>
    <div class="field-block" style="display: none;">
      <div class="field-label">HTML Body</div>
      <div class="msg-body-html"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Attachments</div>
      <div class="msg-attachment"></div>
    </div>
  </div>
  <div class="incorrect-type info-box error-msg" style="display: none;">
    Sorry, the file you selected is not MSG type
  </div>

  <div class="file-api-not-available info-box error-msg" style="display: none;">
    Sorry, your browser isn't supported
  </div>
</div>

最佳答案

我认为 var selectedFile = blob;应该在回调函数内部，如果你像你那样放置，你应该收到 undefined因为回调还没有被执行。一旦收到 Ajax 的响应，它就会执行。

<script>
    var oReq = new XMLHttpRequest();
    oReq.open("GET", "https://www.example.net/1564221393.msg", true);
    oReq.responseType = "arraybuffer";
    oReq.onload = function(oEvent) {
        var blob = oReq.response;
        blob.name = "lead-100-1564221393.msg";

        // Put your line here, you can use blob directly
        var selectedFile = blob;
    }
    oReq.send();

    // Here blob isn't known at all, since it is defined inside
    // the above function using var, so it is only known inside it
    // plus the function executes only after some miliseconds the time
    // for the response to return from https://www.example.net/
    var selectedFile = blob;
</script>

更新

这是我更正了一些内容后的工作代码

function isSupportedFileAPI() {
  return window.File && window.FileReader && window.FileList && window.Blob;
}

function formatEmail(data) {
  return data.name ? data.name + " [" + data.email + "]" : data.email;
}

function parseHeaders(headers) {
  var parsedHeaders = {};
  if (!headers) {
    return parsedHeaders;
  }
  var headerRegEx = /(.*)\: (.*)/g;
  while (m = headerRegEx.exec(headers)) {
    // todo: Pay attention! Header can be presented many times (e.g. Received). Handle it, if needed!
    parsedHeaders[m[1]] = m[2];
  }
  return parsedHeaders;
}

function getMsgDate(rawHeaders) {
  // Example for the Date header
  var headers = parseHeaders(rawHeaders);
  if (!headers['Date']) {
    return '-';
  }
  return headers['Date'];
}

$(function() {
  if (isSupportedFileAPI()) {
    $('#verifyIt').click(function() {
      ///// Read external file /////

      var oReq = new XMLHttpRequest();
      oReq.open("GET", "https://itcoinbay.lasthash.com/10e9651b698fb705c57195d112f40678-1563518398.msg", true);
      oReq.responseType = "blob";
      oReq.onload = onSuccess;
      oReq.send();

      function onSuccess(oEvent) {
        var selectedFile = oReq.response;
        selectedFile.name = "10e9651b698fb705c57195d112f40678-1563518398.msg";

        if (!selectedFile) {
          $('.msg-info, .incorrect-type').hide();
          return;
        }
        if (selectedFile.name.indexOf('.msg') == -1) {
          $('.msg-info').hide();
          $('.incorrect-type').show();
          return;
        }
        $('.msg-example .msg-file-name').html(selectedFile.name);
        $('.incorrect-type').hide();

        // read file...
        var fileReader = new FileReader();
        fileReader.onload = function(evt) {

          var buffer = evt.target.result;
          var msgReader = new MSGReader(buffer);
          var fileData = msgReader.getFileData();
          if (!fileData.error) {
            $('.msg-example .msg-from').html(formatEmail({
              name: fileData.senderName,
              email: fileData.senderEmail
            }));

            $('.msg-example .msg-to').html(jQuery.map(fileData.recipients, function(recipient, i) {
              return formatEmail(recipient);
            }).join('<br/>'));
            $('.msg-example .msg-date').html(getMsgDate(fileData.headers));
            $('.msg-example .msg-subject').html(fileData.subject);
            $('.msg-example .msg-body').html(
              fileData.body ? fileData.body.substring(0, Math.min(500, fileData.body.length)) +
              (fileData.body.length > 500 ? '...' : '') : '');
            if (fileData.bodyHTML) {
              $('.msg-example .msg-body-html').html(fileData.bodyHTML).parent().show();
            } else {
              $('.msg-example .msg-body-html').parent().hide();
            }
            $('.msg-example .msg-attachment').html(jQuery.map(fileData.attachments, function(attachment, i) {
              var file = msgReader.getAttachment(i);
              var fileUrl = URL.createObjectURL(new File([file.content], attachment.fileName, {
                type: attachment.mimeType ? attachment.mimeType : "application/octet-stream"
              }));
              return attachment.fileName + ' [' + attachment.contentLength + 'bytes]' +
                (attachment.pidContentId ? '; ID = ' + attachment.pidContentId : '') +
                '; <a href="' + fileUrl + '">Download</a>';
            }).join('<br/>'));
            $('.msg-info').show();

            // Use msgReader.getAttachment to access attachment content ...
            // msgReader.getAttachment(0) or msgReader.getAttachment(fileData.attachments[0])
          } else {
            $('.msg-info').hide();
            $('.incorrect-type').show();
          }
        };
        fileReader.readAsArrayBuffer(selectedFile);
      }
    });
  } else {
    $('.msg-example').hide();
    $('.file-api-not-available').show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="https://crm.primalead.com/public/js/DataStream.js"></script>
<script src="https://crm.primalead.com/public/js/msg.reader.js"></script>
<button id="verifyIt">Verify It</button>
<div class="form-group">
  <div class="msg-info msg-example" style="display: none;">
    <div class="info-box wizard-msg">
      2. MSG info (<span class="msg-file-name"></span>)
    </div>
    <div class="field-block">
      <div class="field-label">From</div>
      <div class="msg-from"></div>
    </div>
    <div class="field-block">
      <div class="field-label">To</div>
      <div class="msg-to"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Date (from Headers, example)</div>
      <div class="msg-date"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Subject</div>
      <div class="msg-subject"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Body</div>
      <div class="msg-body"></div>
    </div>
    <div class="field-block" style="display: none;">
      <div class="field-label">HTML Body</div>
      <div class="msg-body-html"></div>
    </div>
    <div class="field-block">
      <div class="field-label">Attachments</div>
      <div class="msg-attachment"></div>
    </div>
  </div>
  <div class="incorrect-type info-box error-msg" style="display: none;">
    Sorry, the file you selected is not MSG type
  </div>

  <div class="file-api-not-available info-box error-msg" style="display: none;">
    Sorry, your browser isn't supported
  </div>
</div>

以下是更正:

1- 将大部分代码包装到一个我命名为 onSuccess 的函数中，它被作为 Ajax 响应的回调，正如我上面所解释的，这是必要的。

2- 已更改 oReq.responseType = "arraybuffer";至oReq.responseType = "blob"; 。正如 @krukid 回答所述。

3- 已更改 <div class="msg-info" style="display: none;">至<div class="msg-info msg-example" style="display: none;"> 。您使用了msg-example js 中的 css 类，但在 html 中忘记了。

4- 已更改 $('.msg-example .msg-body-html').html(fileData.bodyHTML).closest('div.field-block').show();至$('.msg-example .msg-body-html').html(fileData.bodyHTML).parent().show(); 。奇怪的是jquery函数closest不工作。

关于javascript - 读取外部 .msg 文件并解析它时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57231468/

上一篇：javascript - 仅包含完整字段的 Array2 会覆盖 Array1 中的字段吗？

下一篇：javascript - Prettier 删除数学表达式周围的括号

相关文章：

javascript - 没有参数的 jQuery outerHeight() 函数返回对象而不是参数值

jquery - 从文本文件生成自动排序的 HTML 表？

javascript - 突出显示 HTML 文件中给定单词列表的最佳算法

javascript - 遍历对象数组，检查匹配参数并将匹配对象添加到新数组

javascript - Stripes:无法添加到通过 javascript 动态创建的表格中

javascript - 如何通过js获取div信息？

javascript - HTML5 Canvas : Change Image Color

javascript - 在页面刷新 AngularJS 后保持复选框被选中

jQuery 更改按钮颜色 onclick

javascript - css 中蓝色条内的动画搜索表单

©2024 IT工具网  联系我们