javascript - Office 加载项开发 : Insert image/picture in Word 2016

Question

我想问一下用 JavaScript 将图像/图片插入文档的最佳方法是什么？我正在在线和离线图像之间权衡，但不知道从哪里开始。

我曾尝试搜索 API 引用资料，但由于缺少代码示例，我无法完全理解“如何”。

任何帮助将不胜感激。干杯!

Answer 1

我们可以通过OOXML、Html向文档中插入图片。并且使用Html插入在线图片很容易。这是一个供您引用的示例:

  function InsertImageHtml() {

    var imgHTML = "<img " +
"    src=''"
+ " alt ='apps for Office image1' />       ";

    Office.context.document.setSelectedDataAsync(
        imgHTML, { coercionType: "html" },
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                write('Error: ' + asyncResult.error.message);
            }
        });
}

和新版本Word API还支持插入带有base 64 数据格式的图像内联图片。您可以引用下面的示例:

  function insertImageBase64New() {

    Word.run(function (context) {

        var body = context.document.body;

        body.insertInlinePictureFromBase64(getBase64(), Word.InsertLocation.start);

        return context.sync().then(function () {
            console.log('Added base64 pictures to the beginning of the document body.');
        });
    })
    .catch(function (error) {
        console.log('Error: ' + JSON.stringify(error));
        if (error instanceof OfficeExtension.Error) {
            console.log('Debug info: ' + JSON.stringify(error.debugInfo));
        }
    });
}

function getBase64() {
    return "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";
}