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

Question

我目前正在开发一个 Office.js Word 插件，我正在尝试从给定的 Url 中插入一张图片。我正在查看位于 :

的 Office.js 文档

InlinePicture class (JavaScript API for Word)

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

想看看是否有人构建了使用 "getBase64ImageSrc()" 从 url 插入图像的文字插件？还是我看错方向了

Answer 1

要在 Word 中插入来自 URL 的图像，请使用 Range.insertHtml method or the Document.setSelectedDataAsync 方法之一，具体取决于您的具体情况和目标。

您链接到的其他方法的文档中似乎有错误 - 我会确保该错误得到更正，但我认为这不是您要查找的 API。

Answer 2

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

Staffer901：关于这个 post，你在谈论 2 个不同的主题。

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

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

这是一个示例：

// 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)


        })

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

我希望这是有用的。谢谢，编码愉快！ -娟.

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

How to insert an image into Word from a URL

javascript

office365

office-js