metabase icon indicating copy to clipboard operation
metabase copied to clipboard

replace html2cavas with html2canvas-pro to support color css functions

Open npretto opened this issue 1 year ago • 2 comments

Description

While working on adding the pdf download functionality to public/embedded dashboard, I started running into this error after a rebase on master:

html2canvas.js:1726 Uncaught (in promise) Error: Attempting to parse an unsupported color function "color"
    at Object.parse (html2canvas.js:1726:1)
    at parse (html2canvas.js:3750:1)
    at new CSSParsedDeclaration (html2canvas.js:3644:1)
    at new ElementContainer (html2canvas.js:3796:1)
    at createContainer (html2canvas.js:4793:1)
    at parseNodeTree (html2canvas.js:4739:1)
    at parseTree (html2canvas.js:4798:1)
    at html2canvas.js:7783:1
    at step (html2canvas.js:86:1)
    at Object.next (html2canvas.js:67:1)

Trying to debug it, it seems like the library doesn't support some color functions like srgb sgba etc that we started to use.

You can reproduce it on this branch by going to a public dashboard and trying to export it as pdf.

The original html2canvas has not been updated in two years: https://www.npmjs.com/package/html2canvas

The solution on this issues seems to be moving to html2canvas-pro which is a more maintained fork that supports the color function(s?).

How to verify

Everything should work as before.

npretto avatar Jun 28 '24 09:06 npretto

Codenotify: Notifying subscribers in CODENOTIFY files for diff da0c9cb64568a0e9478a19b74c0652c2ba3be4a5...914fe70b1c7aec246f50fc90b1e75a9d97ccdc28.

Notify File(s)
@alxnddr frontend/src/metabase/visualizations/lib/save-chart-image.ts
frontend/src/metabase/visualizations/lib/save-dashboard-pdf.ts

github-actions[bot] avatar Jun 28 '24 09:06 github-actions[bot]

Status Complete ↗︎
Commit 914fe70b1c7aec246f50fc90b1e75a9d97ccdc28
Results
⚠️ 6 Flaky
2716 Passed

replay-io[bot] avatar Jun 28 '24 09:06 replay-io[bot]