如何通过Office-JS实现Word绘图画布的带缩放复制粘贴功能

问题核心 #

手动将大绘图画布内容粘贴到小画布时，Word会自动按比例缩放内容适配，但通过getOoxml()+insertOoxml()实现时，不会触发原生自动缩放逻辑。你之前的代码仅调整了元素偏移量，未修改元素自身尺寸，且OOXML解析命名空间错误，导致修改不生效。

可行解决方案 #

方案1：模拟手动复制粘贴（最贴近原生行为） #

直接调用Word的复制粘贴命令，利用原生逻辑自动处理缩放：

// 定位大画布（示例：通过内容控件ID定位，可根据实际场景调整）
const largeCanvasCC = context.document.contentControls.getById('large_canvas_id');
// 选中大画布内全部内容
largeCanvasCC.select();
// 复制
await context.document.execCommandAsync('Copy');

// 定位小画布
const smallCanvasCC = context.document.contentControls.getById('small_canvas_id');
// 将光标移至小画布内部末尾
smallCanvasCC.insertParagraph('', Word.InsertLocation.end).select();
// 粘贴并使用目标格式适配
await context.document.execCommandAsync('Paste', false, '{ "PasteOptions": "UseDestinationStyle" }');
await context.sync();

方案2：修改OOXML的元素尺寸与偏移（精准控制） #

需要同时调整元素的尺寸和位置偏移，并使用正确的OOXML命名空间解析：

// 获取大、小画布的实际尺寸
const largeCanvasPara = context.document.body.paragraphs.getItemAt(0); // 替换为实际定位方式
const smallCanvasPara = context.document.body.paragraphs.getItemAt(1);
largeCanvasPara.load('width, height');
smallCanvasPara.load('width, height');
await context.sync();

// 计算等比例缩放因子（取宽高比例的较小值，避免变形）
const scaleRatio = Math.min(
  smallCanvasPara.width / largeCanvasPara.width,
  smallCanvasPara.height / largeCanvasPara.height
);

// 获取大画布的OOXML（注意使用Word专属的MIME类型）
const largeOoxml = largeCanvasPara.getOoxml();
await context.sync();

// 用正确的命名空间解析OOXML
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(largeOoxml.value, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml');

// 遍历所有绘图元素，修改尺寸和偏移
const drawings = xmlDoc.getElementsByTagName('wp:drawing');
for (let i = 0; i < drawings.length; i++) {
  // 修改元素整体尺寸（wp:ext）
  const ext = drawings[i].getElementsByTagName('wp:ext')[0];
  if (ext) {
    ext.setAttribute('cx', Math.round(parseInt(ext.getAttribute('cx')) * scaleRatio).toString());
    ext.setAttribute('cy', Math.round(parseInt(ext.getAttribute('cy')) * scaleRatio).toString());
  }

  // 修改水平偏移
  const posH = drawings[i].getElementsByTagName('wp:positionH')[0];
  if (posH) {
    const offsetH = posH.getElementsByTagName('wp:posOffset')[0];
    if (offsetH) {
      offsetH.textContent = Math.round(parseInt(offsetH.textContent) * scaleRatio).toString();
    }
  }

  // 修改垂直偏移
  const posV = drawings[i].getElementsByTagName('wp:positionV')[0];
  if (posV) {
    const offsetV = posV.getElementsByTagName('wp:posOffset')[0];
    if (offsetV) {
      offsetV.textContent = Math.round(parseInt(offsetV.textContent) * scaleRatio).toString();
    }
  }

  // 修改内部形状/图片的尺寸与偏移（针对DrawingML内容）
  const xfrm = drawings[i].getElementsByTagName('a:xfrm')[0];
  if (xfrm) {
    const shapeExt = xfrm.getElementsByTagName('a:ext')[0];
    const shapeOff = xfrm.getElementsByTagName('a:off')[0];
    if (shapeExt) {
      shapeExt.setAttribute('cx', Math.round(parseInt(shapeExt.getAttribute('cx')) * scaleRatio).toString());
      shapeExt.setAttribute('cy', Math.round(parseInt(shapeExt.getAttribute('cy')) * scaleRatio).toString());
    }
    if (shapeOff) {
      shapeOff.setAttribute('x', Math.round(parseInt(shapeOff.getAttribute('x')) * scaleRatio).toString());
      shapeOff.setAttribute('y', Math.round(parseInt(shapeOff.getAttribute('y')) * scaleRatio).toString());
    }
  }
}

// 序列化修改后的OOXML并插入到小画布
const modifiedOoxml = new XMLSerializer().serializeToString(xmlDoc);
smallCanvasPara.insertOoxml(modifiedOoxml, Word.InsertLocation.replace);
await context.sync();

方案3：利用内容控件直接复制 #

如果画布是用ContentControl包装的，可直接复制控件内内容，Word会自动适配：

const largeCanvasCC = context.document.contentControls.getById('large_canvas_cc');
const smallCanvasCC = context.document.contentControls.getById('small_canvas_cc');

largeCanvasCC.copy();
smallCanvasCC.paste();
await context.sync();

原代码问题说明 #

1. 解析OOXML时使用了application/xhtml+xml，而非Word专属的OOXML命名空间，导致XML结构解析错误，修改无法生效；
2. 仅调整了元素的位置偏移，未修改元素自身的尺寸属性，内容无法适配小画布大小。

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