javascript - 如何从 URL 将图像插入到 Word 中

Question

我目前正在为 Word 开发 Office.js 插件，我正在尝试从给定的 Url 插入图像。我正在查看位于以下位置的 Office.js 文档:

InlinePicture class (JavaScript API for Word)

我看到它们可能具有通过 "getBase64ImageSrc()" 从 img url 获取 base64 表示的内置功能。开发办公室网站上的文档具有误导性或不正确。

看看是否有人使用 "getBase64ImageSrc()" 构建了一个从 url 插入图像的 word-addin？还是我看错了方向。

Answer 1

需要详细说明 Mike 的回答，以避免混淆。

Staffer901:您在这篇文章中谈论的是 2 个不同的主题。

1. 将图像插入文档。我认为这是您的底线问题:如何插入带有图像 URL 的图像。 Michael 提到的选项(基本上是为图像插入经典 HTML)可以使用，但我不建议您使用其中任何一个。原因是因为实际上您正在做的是存储对图像的引用，该图像具有与互联网依赖项的连接，这意味着任何使用该文档的用户都必须连接才能查看图像。

我建议您为图像插入(永久插入 :))做的是使用 range.insertInlinePictureFromBase64 方法。您需要一个额外的步骤来将 URL 中的图像编码为 base64 字符串，这是方法接受的输入参数和 here。是关于如何实现这一点的很好的讨论。请查看下面的示例，该示例显示在文档的第一段插入 InlinePicture，假设您有 base64。请注意，您可以获得当前插入点并在需要时将图片插入到那里。 insertInlinePictureFromBase64 是从范围继承的任何对象的方法，如正文、段落、内容控制等。

这是一个示例:

// Run a batch operation against the Word object model.
Word.run(function (context) {

    // Create a proxy object for the paragraphs collection.
    var paragraphs = context.document.body.paragraphs;

    // Queue a commmand to load the style property for all of the paragraphs.
    context.load(paragraphs);

    // Synchronize the document state by executing the queued commands,
    // and return a promise to indicate task completion.
    return context.sync().then(function () {

        // Queue a command to get the first paragraph.
        var paragraph = paragraphs.items[0];

        var b64encodedImg = "iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAIAAAAxEEnAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACFSURBVDhPtY1BEoQwDMP6/0+XgIMTBAeYoTqso9Rkx1zG+tNj1H94jgGzeNSjteO5vtQQuG2seO0av8LzGbe3anzRoJ4ybm/VeKEerAEbAUpW4aWQCmrGFWykRzGBCnYy2ha3oAIq2MloW9yCCqhgJ6NtcQsqoIKdjLbFLaiACnYyf2fODbrjZcXfr2F4AAAAAElFTkSuQmCC";

        // Queue a command to insert a base64 encoded image at the beginning of the first paragraph.
        paragraph.insertInlinePictureFromBase64(b64encodedImg, Word.InsertLocation.start);

        // Synchronize the document state by executing the queued commands,
        // and return a promise to indicate task completion.
        return context.sync().then(function () {
            console.log('Added an image to the first paragraph.');
        });
    });
})
.catch(function (error) {
    console.log('Error: ' + JSON.stringify(error));
    if (error instanceof OfficeExtension.Error) {
        console.log('Debug info: ' + JSON.stringify(error.debugInfo));
    }
});

最后请注意，Michaels 提到的 setSelectedDataAsync 方法最近更新为支持图像插入，您还需要提供图像的 base64，但好处是您可以获得向后兼容性(它也适用于 2013 客户端)这是一个代码示例:

// assumes a valid base64 is provided as the first parameter.
Office.context.document.setSelectedDataAsync(mybase64, { coercionType: 'image' }, function (result) {
            if (result.status == 'succeeded')
                app.showNotification("Image inserted");
            else
                app.showNotification("Error:" + result.error.message + " : " + error.name)


        })

1. 使用文档中的图像。这是关于从文档中的现有图像获取 base64。我们有一个 body 。您可以使用 inlinePictures 集合获取文档中的所有图像，并使用 getBase64 方法获取二进制文件的 base64 编码表示。我想知道为什么这在文档中令人困惑，你能详细说明一下吗？

我希望这是有用的。 谢谢，编码愉快! -胡安。