Вставка изображения в Word

Question

Я пытаюсь вставить сгенерированное изображение QR-кода в документ Word, но изображение не отображается должным образом:

Мой код:

function insertImage() {
    Word.run(function (context) {
        $('#output').qrcode({
            text: $("#txtData").val(),
            render: "canvas",
            background: "#ffffff",
            foreground: "#000000",
            width: 150,
            height: 150
        });
        var canvas = $('#output canvas');
        console.log(canvas);
        var img = canvas.get(0).toDataURL("image/png");

        $("#output").attr("src", img); //QR Code image generated on the task pane

        var imgHtml = "<img " + "src='" + img + "' />";

        // Code that insert the QR image in the document
        Office.context.document.setSelectedDataAsync(imgHtml, {
                coercionType: "html"
            },
            function (asyncResult) {
                if (asyncResult.status == "failed") {
                    writeError('Error: ' + asyncResult.error.message);
                }
            });
    });
}

Answer 1

Вы смешиваете два разных соглашения API здесь. Вы не используете run контекст при использовании Shared API, он используется только при вызове Word API. В целом, я бы порекомендовал использовать Word API, так как он более новый и в целом предоставляет больше функциональных возможностей.

Тем не менее, для этой операции вы можете использовать либо Word, либо Shared API. Я приведу примеры для обоих.

Также обратите внимание, что .toDataURL() возвращает строку, содержащую изображение base64. Это не чисто представление base64. Вы должны удалить data:image/png;base64, Префикс перед тем, как Word сможет отрендерить его.

Общий API:

Поскольку вы просто вставляете изображение, я бы использовал Office.CoercionType.Image вместо Office.CoercionType.Html:

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

Word API:

Word API включает в себя insertInlinePictureFromBase64 метод. Как с setSelectedDataAsync, он принимает изображение в виде строки в кодировке Base 64:

Word.run(function (context) {
    context.document.body.insertFileFromBase64(base64String, "end");
    return context.sync();
}).catch(function (myError) {
    // Handle error
})