如何通过Office-JS将任务窗格生成的条码插入Excel工作表？

• 正在开发Excel Add-In，已用JsBarcode在任务窗格生成条码，希望将其插入到Excel工作表中
• 现有HTML标签：

<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
   }

• 补充说明：公司SSL证书限制，只能通过HTTP加载插件，Clipboard API仅支持HTTPS无法使用，需要适配HTTP环境的解决方案

核心思路 #

不能直接把JsBarcode生成的复杂对象写入单元格，需将条码转换为Base64格式的图片，再通过Excel JavaScript API插入到工作表中。

具体步骤 #

1. 提取条码的Base64图片数据
   JsBarcode生成的<img>标签src属性就是Base64格式的图片，直接提取即可：

   await JsBarcode("#barcode", "Hi!", { /* 你的条码配置选项 */ });
   const barcodeImg = document.getElementById("barcode");
   const base64Data = barcodeImg.src; // 获取Base64格式的图片字符串
   

2. 将Base64图片插入Excel工作表
   使用Excel API的shapes.addImage方法，去除Base64前缀后插入到指定位置：

   const ws = context.workbook.worksheets.getActiveWorksheet();
   // 移除Base64字符串开头的标识前缀
   const imageData = base64Data.split("base64,")[1];
   const image = ws.shapes.addImage(imageData);
   // 可选：调整图片位置和大小，对齐到A1单元格
   image.top = ws.getRange("A1").top;
   image.left = ws.getRange("A1").left;
   image.height = 100;
   image.width = 200;
   await context.sync();
   

完整可运行代码 #

async function insertBarcodeToExcel() {
    try {
        // 在任务窗格生成条码
        await JsBarcode("#barcode", "Hi!", {
            format: "CODE128",
            height: 100,
            width: 2
        });
        
        // 获取Base64图片数据
        const barcodeImg = document.getElementById("barcode");
        const base64Data = barcodeImg.src;
        const imageData = base64Data.split("base64,")[1];
        
        // 插入到Excel工作表
        const ws = context.workbook.worksheets.getActiveWorksheet();
        const image = ws.shapes.addImage(imageData);
        // 对齐到A1单元格位置
        image.top = ws.getRange("A1").top;
        image.left = ws.getRange("A1").left;
        await context.sync();
        
        console.log("条码已成功插入工作表");
    } catch (error) {
        console.error("插入失败：", error);
    }
}

原代码失效原因 #

你之前尝试将JsBarcode生成的复杂对象直接赋值给单元格values属性，但Excel的values仅支持文本、数字等基础数据类型，无法识别这类包含编码信息的复杂对象，因此必须转换为图片格式插入。

内容的提问来源于stack exchange，提问作者FreeSoftwareServers