When using Angular Material Field, Label is not getting exported in screenshot (Canvas/Image)

[subodhgodbole]

Please make sure you are testing with the latest release of html2canvas. Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• [x] You are using the latest version
• [x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I am trying to use this library with my Angular project. However I see that generated canvas / image does not contain Angular Material Field's Label value. The generated image contains Prefix, Postfix, Hint, but not the Label, in both cases when appearance is "fill" or "outline".

Here is running example using Stackblitz - https://stackblitz.com/edit/angular-html-2-canvas

Two issues with labels - When there is value in field, label is missing in canvas / image

When there is no value in the field, label is getting truncated, also it gets overlapped with placeholder if it exists

When developing with Angular, it's very common to use Label, so label not getting into canvas / image is a major problem.

Specifications:

• html2canvas version tested with: 1.4.1 - This is latest at the time of reporting this issue
• Browser & version: Chrome 121.0.6167.86 (Official Build) (64-bit) - This is latest at the time of reporting this issue
• Operating system: Windows 11

[Skullcachi]

Hello there, did you manage to fix this? I am having the exact same problem... when downloading the pdf, my forms looks the same but without all the labels...

[subodhgodbole]

I have not received any reply on this thread from library owner(s). However, I took a different approach, and rendered read-only version of my Angular Material Form after user has filled it. Since there are no input fields now, export as image worked as expected.

[rizlajf]

@subodhgodbole could you please share how did you get the readonly version of the html?