在office-js中插入svg

时间:2016-09-19 11:22:12

标签: office-js officedev

背景

我正在使用Word Javascript API开发Office添加,以在文档中插入一些图表。

我目前的做法如下:
在任务窗格中生成SVG图像=>使用canvg =>在画布上绘制图像获取画布图像为png =>在Word文档中插入

除了一件事之外,这种方法很好 - png图像本身很模糊,并且由于转换而导致质量损失很多。

问题
是否可以将Body.insertInlinePictureFromBase64与矢量图形图像一起使用?

一些注释:

  • 尝试将图像作为纯XML插入 - 无法正常工作
  • 尝试将svg字符串编码为base64并将其传递给 要插入的insertInlinePicture方法 - 无法使其工作只显示损坏的图像 (可能是因为它需要一个实际的位图而不是 矢量图)

2 个答案:

答案 0 :(得分:1)

Todor - 好问题。问题是Office中不支持矢量文件格式。实际上,如果您尝试直接从Word中的insert->图片功能插入* .svg图像,您将看到图像不会按预期插入。例如,对于Word Online也是如此。

我建议你尝试jpg,jpeg,png,gif,bmp,tif或tiff格式。

谢谢! 涓。

答案 1 :(得分:0)

下面是一个如何将SVG内容插入到Word文档中的示例:

https://gist.github.com/barisbikmaz/73526f81e1425845fc199506ff871429

相关代码段:

const svgImage = '<svg><rect x="0" y="0" height="50" width="50" style="stroke:#ff0000; fill:#0000ff" /></svg>';

Office.context.document.setSelectedDataAsync(svgImage, { coercionType: Office.CoercionType.XmlSvg, imageLeft: 220, imageTop: 220, imageWidth: 100 }, function(result) {
     console.log(result);
});

注意:

imageLeft和imageTop被Word忽略,请参见https://docs.microsoft.com/en-us/javascript/api/office/office.document?view=office-js

最好的问候, 拉希德