如何在浏览器中读取PDF、DOC、Excel文件内容并插入Froala编辑器

以下方案完全基于原生浏览器API实现，无第三方依赖：

方案1：剪贴板间接解析（最接近手动复制粘贴效果） #

这个方案复用系统和默认办公软件的解析能力，最终效果和你手动打开文件、全选复制、粘贴的结果完全一致。

• 创建一个隐藏的可编辑DOM元素，挂载到页面上不影响正常显示：

  .hidden-editor {
    contenteditable: true;
    opacity: 0;
    position: absolute;
    left: -9999px;
    top: 0;
  }
  

• 在用户主动触发的上传回调中，调用原生Clipboard API将上传的File对象写入系统剪贴板
• 触发隐藏可编辑元素的粘贴操作，系统会自动将文件解析为可识别的HTML/纯文本格式写入元素内
• 读取隐藏元素的内容，直接插入Froala编辑器即可
• 操作完成后销毁隐藏元素即可

示例代码：

async function insertFileContentToFroala(file, froalaInstance) {
  const hiddenEdit = document.createElement('div');
  hiddenEdit.contentEditable = true;
  hiddenEdit.style.cssText = 'opacity:0;position:absolute;left:-9999px';
  document.body.appendChild(hiddenEdit);

  try {
    // 写入文件到剪贴板
    const item = new ClipboardItem({
      [file.type]: file
    });
    await navigator.clipboard.write([item]);
    // 执行粘贴
    hiddenEdit.focus();
    document.execCommand('paste');
    // 插入到编辑器
    froalaInstance.html.insert(hiddenEdit.innerHTML);
  } catch (e) {
    console.error('解析失败', e);
    alert('无法自动解析该文件，请手动打开文件后复制内容粘贴到编辑器');
  } finally {
    document.body.removeChild(hiddenEdit);
  }
}

注意事项：

1. 该操作必须在用户主动触发的交互事件（比如点击、上传回调）中执行，浏览器会阻止非用户交互触发的剪贴板操作
2. 需要用户授予页面剪贴板读写权限
3. 部分老旧浏览器不支持ClipboardItem，遇到不支持的情况直接降级提示用户手动操作即可

方案2：基于压缩流API解析现代办公格式 #

针对docx、xlsx这类基于ZIP打包的开放格式，可以用原生Compression Streams API解压后提取文本：

• docx：解压后读取word/document.xml文件，解析XML提取所有<w:t>标签的文本内容
• xlsx：解压后读取xl/sharedStrings.xml文件，解析XML提取所有<t>标签的文本内容
• 旧版本二进制doc、xls格式没有原生解析API，无法用该方案处理
• PDF没有原生浏览器解析API，无法用该方案处理

通用限制说明 #

• 如果你需要100%还原手动复制粘贴的效果，优先使用方案1
• 完全不用第三方库的前提下，无法实现全版本所有格式的兼容，建议在上传入口增加格式提示，不兼容的格式引导用户手动粘贴

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