You can try @react-pdf /renderer @Silky ant

Yea it should be able to use any pdf generator which is node.js compatible,

For example: https://v0.dev/chat/0qBiqEnnuRM
Preview: https://v0-next-js-pdf-generator-lac.vercel.app/

hello, @Himalayan

Hello @utsav-flex

are you aware of "@react-pdf/renderer" ?

Yes

okay, thanks

i have used react pdf renderer, inside them, i want to set LinearGradient and generate pdf, but i am not able to set gradient with angle.

i want to set below, svg config in LinearGradient:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="g" x1="49.99999999999999%" y1="0%" x2="50.000000000000014%" y2="100%">
<stop offset="0%" stop-color="#ff8000" />
<stop offset="50%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#00b428" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100" fill="url(#g)"/>
</svg>


i also try in "react-pdf playground" but it seem like:

What would be the expected output?

data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%2249.99999999999999%25%22%20y1%3D%220%25%22%20x2%3D%2250.000000000000014%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff8000%22%20%2F%3E%0A%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23ffffff%22%20%2F%3E%0A%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2300b428%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22url(%23g)%22%2F%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E

inshort i want to set below,

background: linear-gradient(rgb(255, 128, 0) 0%, rgb(255, 255, 255) 50%, rgb(0, 180, 40) 100%)

this is one example it might be changeable.

i have this background CSS, i want to set this bg in pdf.

i have used this "@react-pdf/renderer": "4.3.0", version

Is this expected output? @utsav-flex

no @Himalayan,
expected output should be: https://prnt.sc/FQpCENcERV-7

Okay

also user can handle the degree https://prnt.sc/a1wtky2T5pMI
css: background: linear-gradient(270deg, rgb(255, 128, 0) 0%, rgb(255, 255, 255) 50%, rgb(0, 180, 40) 100%);

<Document>
<Page size="A4" style={{ padding: 0 }}>
<Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', top: 0, left: 0 }}>
<Defs>
<LinearGradient id="bgGrad" x1="1" y1="0" x2="0" y2="1">
<Stop offset="0%" stopColor="rgb(255,128,0)" />
<Stop offset="50%" stopColor="rgb(255,255,255)" />
<Stop offset="100%" stopColor="rgb(0,180,40)" />
</LinearGradient>
</Defs>

{/* fill full area with gradient /}
<Rect x="0" y="0" width="100" height="100" fill="url(#bgGrad)" />
</Svg>

{/ Your page content on top of the gradient */}
<Text style={{ margin: 24, fontSize: 18 }}>Content over gradient background</Text>
</Page>
</Document>

Try this it will give a vertical orange, white, green

<Document>
<Page size="A4" style={{ padding: 0 }}>
<Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', top: 0, left: 0 }}>
<Defs>
<LinearGradient id="bgGrad" x1="0" y1="1" x2="0" y2="1">
<Stop offset="0%" stopColor="rgb(255,128,0)" />
<Stop offset="50%" stopColor="rgb(255,255,255)" />
<Stop offset="100%" stopColor="rgb(0,180,40)" />
</LinearGradient>
</Defs>

{/* fill full area with gradient /}
<Rect x="0" y="0" width="100" height="100" fill="url(#bgGrad)" />
</Svg>

{/ Your page content on top of the gradient */}
<Text style={{ margin: 24, fontSize: 18 }}>Content over gradient background</Text>
</Page>
</Document>

Try this it will give a horizontal orange, white, green

how you calculate this things x1="0" y1="1" x2="0" y2="1" ?

because we have dynamic angle so, we want to create separate handler for that.

export const cssAngleToSvgCoords = (angleDeg) => {
const angle = ((angleDeg % 360) + 360) % 360;
const rad = (angle * Math.PI) / 180;
// CSS angle: vector = (sin(A), -cos(A))
const vx = Math.sin(rad);
const vy = -Math.cos(rad);
const x1 = ((1 - vx) / 2) * 100;
const y1 = ((1 - vy) / 2) * 100;
const x2 = ((1 + vx) / 2) * 100;
const y2 = ((1 + vy) / 2) * 100;
return { x1: ${x1}%, y1: ${y1}%, x2: ${x2}%, y2: ${y2}% };
};


we have created this handler for that.

is it okay ?

Percentage will not work but still you can try manually in playground with giving random manual value

you have any ideas for how to calculate coordinates ?

For dynamic angle I need to check because this one will not work same as HTML SVG

can you check this

hello @Himalayan , are you there ?

Yes I am here need to do trail and error for that
And I am occupied in my regular work

okay thanks,

can you give just overview how x1, x2 and y1, y2 is calculating ?

hey @Himalayan
if i try to use radial gradient, it is not set proper coordinates

generated: https://prnt.sc/8F3WLfqtrHWO

expected: https://prnt.sc/fvRncoSq0fLm

background: radial-gradient(circle, rgb(255, 128, 0) 0%, rgb(255, 255, 255) 50%, rgb(0, 180, 40) 100%);

const doc = (
<Document>
<Page size="A4">
<Svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="none">
<Defs>
<RadialGradient id="myRadialGradient">
<Stop offset="0%" stopColor="#ff8000" />
<Stop offset="50%" stopColor="#ffffff" />
<Stop offset="100%" stopColor="#00b428" />
</RadialGradient>
</Defs>

<Rect x="0" y="0" width="100%" height="100%" fill="url('#myRadialGradient')" />
</Svg>
</Page>
</Document>
);

ReactPDF.render(doc);