diff --git a/biome.json b/biome.json index 4d3fccb..2ca87e3 100644 --- a/biome.json +++ b/biome.json @@ -60,7 +60,6 @@ "noExportedImports": "error", "noHeadElement": "error", "noHeadImportInDocument": "error", - "noImgElement": "error", "noIrregularWhitespace": "error", "noNestedTernary": "error", "noOctalEscape": "error", diff --git a/examples/index.ts b/examples/index.ts index 07d7e4b..cb51775 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -15,8 +15,9 @@ console.error = (...args) => { const main = async () => { await import('./recharts-basic'); await import('./recharts-composed'); - await import('./victory-basic'); await import('./recharts-gradient'); + await import('./recharts-images'); + await import('./victory-basic'); return console.debug('✅ /examples updated!'); }; diff --git a/examples/recharts-images.pdf b/examples/recharts-images.pdf new file mode 100644 index 0000000..d008c4b Binary files /dev/null and b/examples/recharts-images.pdf differ diff --git a/examples/recharts-images.tsx b/examples/recharts-images.tsx new file mode 100644 index 0000000..d1c6220 --- /dev/null +++ b/examples/recharts-images.tsx @@ -0,0 +1,76 @@ +import { fileURLToPath } from 'node:url'; +import { Document, Page } from '@react-pdf/renderer'; +import ReactPDF from '@react-pdf/renderer'; +import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'; +import ReactPDFChart from '../src'; + +const data = [ + { + name: 'Page A', + pv: 2400, + amt: 2400, + }, + { + name: 'Page B', + pv: 1398, + amt: 2210, + }, + { + name: 'Page C', + pv: 9800, + amt: 2290, + }, + { + name: 'Page D', + pv: 3908, + amt: 2000, + }, + { + name: 'Page E', + pv: 4800, + amt: 2181, + }, + { + name: 'Page F', + pv: 3800, + amt: 2500, + }, + { + name: 'Page G', + pv: 4300, + amt: 2100, + }, +]; + +const MyDocument = () => ( + + + +
+ + + + + + + Red Apple +
+
+
+
+); + +const __dirname = fileURLToPath(new URL('.', import.meta.url)); + +ReactPDF.render(, `${__dirname}/recharts-images.pdf`); diff --git a/src/index.tsx b/src/index.tsx index ae30292..c8b2bda 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,7 @@ import { Defs, Ellipse, G, + Image, Line, LinearGradient, Path, @@ -172,6 +173,22 @@ const webSvgToPdfSvg = (children: React.ReactElement, chartStyle?: Style) => { ); case 'g': return {children}; + case 'img': + return ( + + ); + case 'li': + return ( + + {children} + + ); case 'line': return ( { {children} ); - case 'li': - return ( - - {children} - - ); case 'lineargradient': return ( { {children} ); + case 'link': + // Not supported in react-pdf. Rendering will be skipped. + return <>; case 'path': return (