在 office-js 中插入 svg
Inserting svg in office-js
背景
我正在开发一个 Office 插件,使用 Word Javascript API 在文档中插入一些图表。
我目前的做法如下:
在任务窗格中生成 SVG 图像 => 使用 canvg 在 canvas 上绘制图像 => 获取 canvas 图像为 png => 插入 Word 文档
除一件事外,这工作正常 - png 图像本身很模糊,并且由于转换而导致质量损失很大。
问题
是否可以将 Body.insertInlinePictureFromBase64 与矢量图形图像一起使用?
一些注意事项:
- 尝试插入普通图像 XML - 没用
- 尝试将 svg 字符串编码为 base64 并通过
要插入的 insertInlinePicture 方法 - 无法使其正常工作,只显示损坏的图像
(可能是因为它需要一个实际的位图图像而不是
矢量图像)
托多 -
很好的问题。问题是 Office 不支持矢量文件格式。事实上,如果您尝试直接从 Word 中的插入-> 图片功能插入 *.svg 图像,您会发现图像不会按预期插入。例如,Word Online 也是如此。
我建议您尝试使用 jpg、jpeg、png、gif、bmp、tif 或 tiff 格式。
谢谢!
娟.
下面是一个如何将 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
此致,
拉希德
背景
我正在开发一个 Office 插件,使用 Word Javascript API 在文档中插入一些图表。
我目前的做法如下:
在任务窗格中生成 SVG 图像 => 使用 canvg 在 canvas 上绘制图像 => 获取 canvas 图像为 png => 插入 Word 文档
除一件事外,这工作正常 - png 图像本身很模糊,并且由于转换而导致质量损失很大。
问题
是否可以将 Body.insertInlinePictureFromBase64 与矢量图形图像一起使用?
一些注意事项:
- 尝试插入普通图像 XML - 没用
- 尝试将 svg 字符串编码为 base64 并通过 要插入的 insertInlinePicture 方法 - 无法使其正常工作,只显示损坏的图像 (可能是因为它需要一个实际的位图图像而不是 矢量图像)
托多 - 很好的问题。问题是 Office 不支持矢量文件格式。事实上,如果您尝试直接从 Word 中的插入-> 图片功能插入 *.svg 图像,您会发现图像不会按预期插入。例如,Word Online 也是如此。
我建议您尝试使用 jpg、jpeg、png、gif、bmp、tif 或 tiff 格式。
谢谢! 娟.
下面是一个如何将 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
此致, 拉希德