exceljs icon indicating copy to clipboard operation
exceljs copied to clipboard

[BUG] addImage editAs:'absolute' not working when use ext,the documentation needs to be more precise

Open wwwxy80s opened this issue 1 year ago • 0 comments

🐛 Bug Report

Lib version: 4.4.0

Steps To Reproduce

Codesandbox reproduce

const workbook = new ExcelJS.Workbook();
const imageDataURL = await qrcode.toDataURL("123");
const imageId = workbook.addImage({
      base64: imageDataURL,
      extension: "png",
});
const sheet = workbook.addWorksheet("My Sheet");
    sheet.addImage(imageId, {
      tl: { col: 0, row: 0 },
      ext: { width: 500, height: 200 },
      editAs: "absolute",
});

The expected behaviour:

Image will not be moved or sized with cells

Possible solution (optional, but very helpful):

TLDR

translated: When the addImage parameter contains a br attribute, the generated XML is xdr:twoCellAnchor. In other cases, xdr:oneCellAnchor is generated. However, xdr:oneCellAnchor does not support the editAs attribute.

addImage参数中存在br属性时,生成的xml才是xdr:twoCellAnchor,其他情况生成的都是xdr:oneCellAnchor,但是xdr:oneCellAnchor不支持editAs属性

Investigation process and speculation:

translated: I ran the test case and debugged the code in image.spec.js. I found that when adding images with the br attribute, editAs:absolute is valid, but images added with the ext attribute are invalid.

Based on this result, I tried to decompress the corresponding generated xlsx file and found that the xml files of the final images in the two files used twoCellAnchor for the valid ones and oneCellAnchor for the invalid ones. Then I searched the code and the information on the Internet and found that oneCellAnchor does not support the editAs attribute, and twoCellAnchor is used only when there is a br attribute in the code, so I guess this may be the reason why editAs:absolute is invalid.

The above is just some searches and guesses, without more detailed investigations, for reference only.

Suggestions:

  1. Adjust the document description first to reduce misleading
  2. See if there is a way to support the use of the editAs:absolute attribute when adding images with the ext attribute

我运行了测试用例,调试了image.spec.js中的代码,发现在添加图片使用br属性时,editAs:absolute是有效的,使用ext属性添加的图片是无效的。

基于此结果,我试着解压缩了对应生成的xlsx文件,发现两种文件中最终图片的xml文件,有效的使用的是twoCellAnchor,无效的使用的是oneCellAnchor。然后去搜索了代码和网络上的资料,发现oneCellAnchor不支持editAs属性,然后代码中存在br属性时才会使用twoCellAnchor,所以我猜测可能是这个原因导致editAs:absolute无效。

以上仅只是一些搜索和猜测,没有更详细的调查,仅供参考。

建议:

  1. 先调整文档描述,减少误导
  2. 看有没有办法能够支持使用ext属性添加图片时,使用editAs:absolute属性

https://github.com/exceljs/exceljs/blob/5bed18b45e824f409b08456b59b87430ded023ab/lib/xlsx/xform/drawing/drawing-xform.js#L11

officeopenxml Two-Cell Anchoring

wwwxy80s avatar Jun 14 '24 11:06 wwwxy80s