React或JavaScript环境下如何在模态框中展示BASE64格式的.MSG文件

实现思路 #

• 第一步：将数据库取出的BASE64字符串转换为ArrayBuffer格式，供MSG解析库读取
• 第二步：使用MSG解析库提取文件内的邮件主题、发件人、收件人、发送时间、正文、附件等核心内容
• 第三步：将解析后的结构化内容直接渲染到模态框的DOM节点中，不需要依赖你现有的PDFViewer（因为MSG是Outlook邮件格式，PDFViewer本身不支持该格式解析）

具体实现步骤 #

1. 安装依赖 #

首先安装MSG解析工具库，执行命令：
npm install @kenjiuno/msgreader

2. 编写转换&解析代码 #

// base64转ArrayBuffer工具函数
function base64ToArrayBuffer(base64) {
  // 先清除base64前缀（如果有的话）
  const binaryString = window.atob(base64.replace(/^data:.*?;base64,/, ''));
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

import MsgReader from '@kenjiuno/msgreader';

// 模态框打开时触发的预览逻辑
function renderMsgContent(base64Str) {
  // 转换base64为解析可用的格式
  const arrayBuffer = base64ToArrayBuffer(base64Str);
  // 初始化MSG解析器
  const msgReader = new MsgReader(arrayBuffer);
  // 提取MSG所有核心信息
  const msgInfo = msgReader.getFileData();

  // 渲染内容到模态框，可根据业务需求调整展示字段
  const modalDom = document.querySelector('#msg-preview-modal');
  modalDom.innerHTML = `
    <div class="msg-header">
      <h3>主题：${msgInfo.subject || '无主题'}</h3>
      <p>发件人：${msgInfo.senderName || ''} &lt;${msgInfo.senderEmail || ''}&gt;</p>
      <p>收件人：${msgInfo.recipients?.map(item => `${item.displayName} <${item.email}>`).join('; ') || ''}</p>
      <p>发送时间：${msgInfo.clientSubmitTime ? new Date(msgInfo.clientSubmitTime).toLocaleString() : ''}</p>
    </div>
    <div class="msg-body" style="margin-top: 16px; padding: 12px; border-top: 1px solid #eee;">
      ${msgInfo.bodyHtml || msgInfo.bodyPlainText || '无正文内容'}
    </div>
  `;

  // 若需要处理附件，可遍历msgInfo.attachments字段，附件二进制内容存在attachment.content属性中
}

适配说明 #

• 如果是Vue/React框架项目，只需把解析得到的msgInfo存入响应式变量，直接在模态框模板中绑定渲染即可，不需要手动操作DOM
• 如果MSG文件内有嵌入式图片，会被解析到msgInfo.attachments列表中，可自行判断附件类型，将图片插入到正文对应位置
• 不需要的元数据字段可直接删除，自定义展示样式即可

内容的提问来源于stack exchange，提问作者programmer