Question

我正在尝试在word文档中插入生成的QR码图像，但图像显示不正确：

我的代码：

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约定。在使用Shared API时，您不会使用run上下文，只有在调用Word API时才会使用它。一般情况下，我建议使用Word API，因为它更新，整体提供更多功能。

也就是说，对于此操作，您可以使用Word或Shared API。我将为两者提供示例。

另请注意，.toDataURL()会返回包含 base64图像的字符串。它不是纯粹的base64表示。在Word能够呈现它之前，您需要删除data:image/png;base64,前缀。

共享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
})

在Word中插入图像

1 个答案: