如何使用JavaScript Word API加载外部文本文件

问题根因 #

你之前用的两种方案在Word Add-in运行环境下存在限制：

• XMLHttpRequest调用跨域资源会被默认拦截，且老旧API已被官方不推荐在Add-in中使用
• Word Add-in主运行上下文的DOM输入元素被阉割了files属性，无法直接读取本地文件

可行实现方案 #

1. 加载远程文本文件 #

使用Office Add-in兼容的fetchAPI实现，提前在Add-in清单配置文件的AppDomains节点添加目标远程域名，避免跨域拦截，示例代码如下：

async function loadRemoteTxtAndInsert() {
  try {
    // 替换为实际的文本文件地址
    const res = await fetch("https://你的服务域名/foo.txt");
    const txtContent = await res.text();
    // 调用Word API插入到文档光标位置
    await Word.run(async (context) => {
      const selectRange = context.document.getSelection();
      selectRange.insertText(txtContent, Word.InsertLocation.replace);
      await context.sync();
    });
  } catch (err) {
    console.log("加载文件出错：" + err);
  }
}

2. 加载本地用户选择的文本文件 #

采用官方推荐的弹窗中转方案，绕过主上下文的DOM限制：

主页面调用代码

function openLocalFilePicker() {
  // 弹窗加载独立的文件选择页面
  Office.context.ui.displayDialogAsync(
    "https://你的Add-in部署域名/file-picker.html",
    { height: 25, width: 30, displayInIframe: true },
    (dialogRes) => {
      const dialog = dialogRes.value;
      // 监听弹窗返回的文件内容
      dialog.addEventHandler(Office.EventType.DialogMessageReceived, async (msg) => {
        dialog.close();
        const txtContent = msg.message;
        // 插入内容到文档
        await Word.run(async (context) => {
          context.document.getSelection().insertText(txtContent, Word.InsertLocation.replace);
          await context.sync();
        });
      });
    }
  );
}

独立文件选择页面（file-picker.html）代码

<!DOCTYPE html>
<html>
<body>
  <input type="file" id="txtPicker" accept=".txt" style="padding: 2rem; font-size: 1rem;">
  <script src="你本地部署的Office JS SDK地址"></script>
  <script>
    Office.onReady(() => {
      document.getElementById("txtPicker").addEventListener("change", (e) => {
        const selectedFile = e.target.files[0];
        const fileReader = new FileReader();
        fileReader.onload = (readRes) => {
          // 将读取到的文本内容传回主页面
          Office.context.ui.messageParent(readRes.target.result);
        };
        fileReader.readAsText(selectedFile);
      });
    });
  </script>
</body>
</html>

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