将任务窗格中的图像复制到 Excel - Office-JS

Question

我正在通过 Excel 加载项制作条形码。到目前为止，我已经 https://github.com/lindell/JsBarcode 在 TaskPane 中生成条形码，但我想把它放到工作表上。

我的 HTML 知识有些有限，这是我正在使用的标签，但我想如果需要我可以使用其他标签，github 中提供的示例使用 Canvas/svg 等

<img id="barcode" />

到目前为止，这就是我所得到的，我没有收到任何错误，但它不起作用。

await JsBarcode("#barcode", "Hi!");

const data = {};
JsBarcode(data, 'text') //, { ...options });
console.log('data:')
console.log(data)

var ws = context.workbook.worksheets.getActiveWorksheet();
ws.getRange("A1").values = data

这是对象

data

：

[object Object]
   {
      [functions]: ,
      __proto__: { },
      encodings: [
         0: {
            [functions]: ,
            __proto__: { },
            data: "1101001000010011110100101100100001111001001010011110100111101011101100011101011",
            options: {
               [functions]: ,
               __proto__: { },
               background: "#ffffff",
               displayValue: true,
               font: "monospace",
               fontOptions: "",
               fontSize: 20,
               format: "CODE128",
               height: 100,
               lineColor: "#000000",
               margin: 10,
               marginBottom: 10,
               marginLeft: 10,
               marginRight: 10,
               marginTop: 10,
               Symbol()_7.6h76ic49xap: undefined,
               Symbol(nodejs.util.inspect.custom)_j.6h76ic49xdy: undefined,
               text: undefined,
               textAlign: "center",
               textMargin: 2,
               textPosition: "bottom",
               width: 2
            },
            Symbol()_7.6h76ic49xap: undefined,
            Symbol(nodejs.util.inspect.custom)_j.6h76ic49xdy: undefined,
            text: "text"
         },
         length: 1
      ],
      Symbol()_7.6h76ic49xap: undefined,
      Symbol(nodejs.util.inspect.custom)_j.6h76ic49xdy: undefined
   }

更新：我需要解决方案在 HTTP 下可用，因为这是我目前加载加载项的方式，因为 Excel 与我公司的 SSL 证书存在问题。我已经查看/阅读了使用新的剪贴板 API，但它只能在 HTTPS 下使用。

Answer 1

条形码或二维码生成器允许将生成的图形代码导出为图像。在从 Excel 要求集 1.9 开始的 Office Web 加载项中，您可以使用 addImage 方法插入图像：

addImage(base64ImageString: string): Excel.Shape

例如，您可以使用以下代码：

Excel.run(async (context) => {
    let sheet = context.workbook.worksheets.getItem("MyWorksheet");
    let cell = sheet.getRange("D5")
    cell.load('top,left') //pre-load top and left
    let myBase64 = "your bas64string here";
    const shape = sheet.shapes.addImage(myBase64)

    await context.sync()

    shape.incrementLeft(cell.left) // <- left
    shape.incrementTop(cell.top) // <-top
    await context.sync();
})

Answer 2

基本上，我必须将图像转换为 Base64，然后将其插入到工作表中。

https://stackoverflow.com/a/35703395/5079799

function textToBase64Barcode(text) {
    var canvas = document.createElement("canvas");
    JsBarcode(canvas, text, { format: "CODE39" });
    return canvas.toDataURL("image/png");
}

---

export async function Button_BARCODES_Run_OnClick() {
    try {
        await Excel.run(async (context) => {
            //START
            console.log('Button_BARCODES_Run_OnClick')
            var Base64Image = await textToBase64Barcode('text')
            Base64Image = Base64Image.split(',')[1]
            console.log('Base64Image:')
            console.log(Base64Image)
            
            var ws = context.workbook.worksheets.getActiveWorksheet();
            ws.getRange("A1").select()
            await context.sync()
            await IMAGES.Insert_Image_At_Selection(context, Base64Image)
            //data.encodings.data
            
            //END
            await context.sync();
        });
    } catch (error) {
        console.error(error);
    }
}

---

IMAGES.Insert_Image_At_Selection = async function Insert_Image_At_Selection(context,Image_Base64_Str) {
    //Leaving as reference, but use "shapes"
    Office.context.document.setSelectedDataAsync(Image_Base64_Str, {
        coercionType: Office.CoercionType.Image,
        imageLeft: 50,
        imageTop: 50,
        imageWidth: 100,
        imageHeight: 100
    },
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                console.log("Action failed with error: " + asyncResult.error.message);
            }
        });
}