如何修复Word JavaScript API插入图片时的RichAPI.Error错误

报错信息 #

Uncaught (in promise) RichApi.Error: GeneralException
at new n (word-win32-16.01.js:25:246592)
at i.processRequestExecutorResponseMessage (word-win32-16.01.js:25:310758)
at word-win32-16.01.js:25:308821

触发错误的代码 #

插入图片的核心逻辑：

function insertImage(baseUrl) {
  Word.run(function (context) {
    // 获取当前选中区域
    var selection = context.document.getSelection();
    // 插入图片
    var picture = selection.insertInlinePictureFromBase64(baseUrl, Word.InsertLocation.before);
    // 加载图片对象
    context.load(picture);
    // 同步执行命令
    return context.sync().then(function () {
      console.log("图片插入成功");
    });
  });
}

图片转Base64的工具函数：

function toBase64URL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
          callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
  xhr.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  xhr.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
  xhr.responseType = 'blob';
  xhr.send();
}

问题原因 #

尝试更换图片、调整跨域请求头后问题依旧，最终定位到：FileReader.readAsDataURL()返回的结果带有data:*/*;base64,前缀，但Word的insertInlinePictureFromBase64接口仅接受纯Base64编码字符串，不需要该前缀，因此触发通用异常。

修复方案 #

在插入图片前剥离前缀，使用纯Base64字符串调用接口：

function insertImage(baseUrl) {
  Word.run(function (context) {
    var selection = context.document.getSelection();
    // 剥离data URI前缀，提取纯Base64内容
    var base64Stripped = baseUrl.split(',')[1];
    var picture = selection.insertInlinePictureFromBase64(base64Stripped, Word.InsertLocation.before);
    context.load(picture);
    return context.sync().then(function () {
      console.log("图片插入成功");
    });
  });
}

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