React to PDF: 좌충우돌 PDF 생성 기능 개발기

౵झఋࢲ࠺झࣗѐ

tই ׼ڄয૓׮u

୶੉ܳࠁפ݆੉ѐࢶغ঻֎ਃ धࢎ৬਍زبই઱ੜೞҊ҅भפ׮

୶੉ܳࠁפ݆੉ѐࢶغ঻֎ਃ धࢎ৬਍زبই઱ੜೞҊ҅भפ׮ )PX

ӣ஠೾ש ୭Ӕആ׼਷যڃоਃ ਃ્بрध੗઱٘दաਃ ਍ز਷ਃ

ೠߣ੄௿ܼਵ۽ ؘ੉ఠоࣚী੟൤ب۾

)FBEFS 'PPUFS $POUFOUT

য tӝઓ1%'ҙ۲ۄ੉࠳۞ܻٜࢎਊೞݶغחѢইצоਃ u

য tӝઓ1%'ҙ۲ۄ੉࠳۞ܻٜࢎਊೞݶغחѢইצоਃ u 50%05 - 5

ۄ੉࠳۞ܻܳࢎਊೞ૑ޅೠ੉ਬ

ۄ੉࠳۞ܻܳࢎਊೞ૑ޅೠ੉ਬ Ҋ݃ਕਃ੉ٚ

const MyDocument = () => ( <Document> <Page size=“A4" style={styles.page}>
<View style={styles.section}> <Text>Hello, if(kakao AI)!</Text> </View> </Page> </Document> )

const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}>
<View style={styles.section}> <Text>Section #1</Text> </View> </Page> </Document> ) ੉઺੘সࠗ׸ పझ౟ࠂ੟ࢿૐо ۄ੉࠳۞ܻ੄ઓࢿૐо j

IUNMDBOWBT ۪؊݂৮ܐ KT1%' )5.- DBOWBT JNBHF ੉޷૑ച 1%'ࢤࢿ೧ࠁӝ

۪؊݂৮ܐ )5.- 1%'ࢤࢿ೧ࠁӝ

IUNMDBOWBT ۪؊݂৮ܐ )5.- DBOWBT 1%'ࢤࢿ೧ࠁӝ

IUNMDBOWBT ۪؊݂৮ܐ )5.- DBOWBT JNBHF ੉޷૑ച 1%'ࢤࢿ೧ࠁӝ

IUNMDBOWBT ۪؊݂৮ܐ KT1%' )5.- DBOWBT JNBHF ੉޷૑ച 1%'ࢤࢿ೧ࠁӝ

੗زಕ੉૑࠙ೡ

੗زಕ੉૚୊ܻܳೡࣻ੓ਸө

ઝ಴ч ా૩۽ ௏٘ܳ

IUNMQEGKTীѱ൞ݎਸಿ׮ IUNMDBOWBT৬KT1%'ܳࢎਊ೧ ੋࣧоמೠ1%'۽߸ജ೤פ׮ IUNMQEG

рױೠࢎਊߨ html2pdf().from(element).set({ // ݽٚ ਃٜࣗ੉ ಕ੉૑ ઺рীࢲ ա־য૑૑ ঋب۾ ߑ૑ೞח
২࣌ pagebreak: { mode: 'avoid-all'} });

ӭՔೠಕ੉૑࠙ೡ

੉޷૑ࢎ੉ૉઑ੿بоמೞભ

ۄ੉࠳۞ܻࢎਊ੉য۵ѱعणפ׮

ࠛоמೠಌૌಽӝ੄द੘

ࢎਊ੗੄׀ਸࣘৈۄ

ਃҳࢎ೦੄੤೧ࢳ

ࢎਊ੗੄׀ਸࣘৈۄ 1BEEJOH

IUNMQEG੄ಕ੉૑࠙ೡ೧Ѿ଼ html2pdf().from(element).set({ // ݽٚ ਃٜࣗ੉ ಕ੉૑ ઺рীࢲ ա־য૑૑ ঋب۾ ߑ૑ೞח
২࣌ pagebreak: { mode: 'avoid-all'} });

IUNMQEG੄ಕ੉૑࠙ೡ೧Ѿ଼ .page-break { break-inside: avoid; }

IUNMQEG੄ಕ੉૑࠙ೡ೧Ѿ଼ @media print { .page-break { break-inside: avoid; } }

୐ߣ૩ࣂ࣌ فߣ૩ࣂ࣌ ࣁߣ૩ࣂ࣌ 1BHFCSFBLܳਤೠ$44

୐ߣ૩ࣂ࣌ فߣ૩ࣂ࣌ ࣁߣ૩ࣂ࣌ 1BHFCSFBLܳਤೠ$44 "ࢎ੉ૉ

୐ߣ૩ࣂ࣌ فߣ૩ࣂ࣌ ࣁߣ૩ࣂ࣌ 1BHFCSFBLܳਤೠ$44 "ࢎ੉ૉ ׮਺ಕ੉૑۽ֈѹ઱ࣁਃ

1BHFCSFBLܳਤೠ$44

1BHFCSFBLܳਤೠ$44 @media print { .page-break { break-inside: avoid; } }

1BHFCSFBLܳਤೠ$44

QBEEJOHਵ۽೧Ѿೞӝ // Before: ౠ੿ elementܳ ׮਺ ಕ੉૑۽ ֈӝח padding div
ࢤࢿ var pad = createElement('div', {style: { display: 'block', height: pxPageHeight - (clientRect.top % pxPageHeight) + 'px' }}); el.parentNode.insertBefore(pad, el);

੗زಕ੉૑࠙ೡӝמਸٜ݅যࠇद׮

IUNMDBOWBT ۪؊݂৮ܐ KT1%' )5.- DBOWBT JNBHF ੉޷૑ച ੗زಕ੉૑࠙ೡ

ౠ੿ਤ஖ী QBEEJOH୶о ۪؊݂৮ܐ ೻؊ ಹఠ ֈߡ݂୶о ࠙ೡ۽૒प೯

੉ਃࣗח׮਺ಕ੉૑۽ֈѹ઱ࣁਃ .page-break { break-inside: avoid; }

࠭ನ౟ܳӝળਵ۽೗ࣄчоઉয়ӝ

࠭ನ౟ܳӝળਵ۽೗ࣄчоઉয়ӝ ׮਺ಕ੉૑۽

QBEEJOHझఋੌਸо૓EJW୶о 1BEEJOH

QBEEJOHझఋੌਸо૓EJW୶о FMFNFOU5PQGPPUFS5PQ GPPUFS)FJHIU IFBEFS)FJHIU

IFBEFS GPPUFS6*୶о

<Provider value={{ isCreatePdfMode: true }}> <Container className={'preview-container'}> {contents.map((content) => (
<Page key={content} > <Headers style={{ visibility: 'hidden' }} /> <Content contentType={content}/> <Footer style={{ visibility: 'hidden' }} /> </Page> ))} </Container> </Provider>

)FBEFS 'PPUFS

)FBEFS

ֈߡ݂୊ܻ୶о

IUNMDBOWBT 3FOEFS KT1%' )5.- DBOWBT JNBHF ੉޷૑ച

IUNMDBOWBT 3FOEFS KT1%' )5.- DBOWBT JNBHF ੉޷૑ച ੉޷૑࠙ೡ

ਃҳࢎ೦ীঌݏחಕ੉૑࠙ೡ ஶబஎ੄6*о׮ন೧بਬোೞѱ୊ܻоמೠഛ੢ࢿ੓ח۽૒ ೻؊ ಹఠ ֈߡ݂ழझథ ѐࢶ੼੿ܻ

औѱஶబஎܳഛ੢ೡࣻ੓ب۾

GFUDIৈࠗܳऔѱ୓௼ೡࣻ੓חߑߨ਷হਸө #FGPSF const data = useFetchAGPContent() const allFetched = data.every((num)
=> num.isFetching === false) const [ { data: glucoseStatisticsData }, { data: timeInRangeData }, { data: agpData }, { data: dailyGlucoseData }, { data: deviceIdUsageData }, ] = data useEffect(() => { if (allFetched) { if (glucoseStatisticsData) setGlucoseStatistics(glucoseStatisticsData) if (timeInRangeData) setTimeInRange(timeInRangeData) if (agpData) setAgp(agpData) if (dailyGlucoseData) setDailyGlucose(dailyGlucoseData) if (deviceIdUsageData) setDeviceIdUsage(deviceIdUsageData) } }, [allFetched]) useEffect(() => { if (allSuccess) { setIsSuccess({ ...isSuccess, agp: true }) } }, [allSuccess]) ݽٚஶబஎী୓௼۽૒ࢤࢿ

#FGPSF const data = useFetchAGPContent() const allFetched = data.every((num) =>
num.isFetching === false) const [ { data: glucoseStatisticsData }, { data: timeInRangeData }, { data: agpData }, { data: dailyGlucoseData }, { data: deviceIdUsageData }, ] = data useEffect(() => { if (allFetched) { if (glucoseStatisticsData) setGlucoseStatistics(glucoseStatisticsData) if (timeInRangeData) setTimeInRange(timeInRangeData) if (agpData) setAgp(agpData) if (dailyGlucoseData) setDailyGlucose(dailyGlucoseData) if (deviceIdUsageData) setDeviceIdUsage(deviceIdUsageData) } }, [allFetched]) useEffect(() => { if (allSuccess) { setIsSuccess({ ...isSuccess, agp: true }) } }, [allSuccess]) ݽٚஶబஎী୓௼۽૒ࢤࢿ GFUDIৈࠗܳऔѱ୓௼ೡࣻ੓חߑߨ਷হਸө

import { useIsFetching } from ‘react-query' // അ੤ ݻ ѐ੄
௪ܻо fetching ࢚కੋ૑ ഛੋ const isFetching = useIsFetching() GFUDIৈࠗܳऔѱ୓௼ೡࣻ੓חߑߨ਷হਸө

import { useIsFetching } from ‘react-query' const isFetching = useIsFetching()
useEffect(() => { // isFetching੉ 0੉ ؼ ٸ(ݽٚ fetchо ৮ܐؼ ٸ) प೯ setIsFetchComplete(pdfPreviewContents.length > 0 && isFetching === 0) }, [pdfPreviewContents, isFetching]) GFUDIৈࠗܳऔѱ୓௼ೡࣻ੓חߑߨ਷হਸө

#FGPSF "GUFS const data = useFetchAGPContent() const allFetched = data.every((num)
=> num.isFetching === false) const [ { data: glucoseStatisticsData }, { data: timeInRangeData }, { data: agpData }, { data: dailyGlucoseData }, { data: deviceIdUsageData }, ] = data useEffect(() => { if (allFetched) { if (glucoseStatisticsData) setGlucoseStatistics(glucoseStatisticsData) if (timeInRangeData) setTimeInRange(timeInRangeData) if (agpData) setAgp(agpData) if (dailyGlucoseData) setDailyGlucose(dailyGlucoseData) if (deviceIdUsageData) setDeviceIdUsage(deviceIdUsageData) } }, [allFetched]) useEffect(() => { if (allSuccess) { setIsSuccess({ ...isSuccess, agp: true }) } }, [allSuccess]) const isFetching = useIsFetching() useEffect(() => { // isFetching੉ 0੉ ؼ ٸ(ݽٚ fetchо ৮ܐؼ ٸ) प೯ setIsFetchComplete(pdfPreviewContents.length > 0 && isFetching === 0) }, [pdfPreviewContents, isFetching]) ݽٚஶబஎী୓௼۽૒ࢤࢿ ֎઴੄௏٘۽೧Ѿ GFUDIৈࠗܳऔѱ୓௼ೡࣻ੓חߑߨ਷হਸө

1%'ࢤࢿदী݅ز੘੉оמೞب۾

<Grid ... domLayout={‘print’} ... /> <Grid ... domLayout={‘autoHeight’} ... />
1%'ࢤࢿद Ӓ৻ചݶ 1%'ࢤࢿदী݅ز੘ೞѱೡࣻחহਸө

<Provider value={{ isCreatePdfMode: true }}> <Container className={'preview-container'}> {contents.map((content) => (
<Page key={content}> <Header/> <Content contentType={content}/> <Footer/> </Page> ))} </Container> </Provider>

<Grid ... domLayout={isCreatePdfMode ? 'print' : 'autoHeight'} ... /> 1%'ࢤࢿदী݅ز੘ೞѱೡࣻחহਸө

੉޷૑୊ܻܳऔѱ؀਽ೡࣻ੓ب۾

IUNMDBOWBT 3FOEFS KT1%' )5.- DBOWBT JNBHF ੉޷૑ച ੉޷૑࠙ೡ

// canvasܳ ಕ੉૑ ֫੉ী ݏѱ ࠙ೡೞח ೣࣻ const canvasList =
await sliceCanvas(fullCanvas, fullHeight, scale) // ࠙ೡػ canvas -> image canvasList.forEach((canvas) => { downloadImage( canvas.toDataURL(`image/${format.toLowerCase()}`), `౵ੌݺ`, ) // ... }) ੉޷૑౵ੌ୊ܻبऔѱ؀਽оמೠ۽૒

5IBOLTUPHVTTMJOLZFEFO

React to PDF: 좌충우돌 PDF 생성 기능 개발기

React to PDF: 좌충우돌 PDF 생성 기능 개발기

More Decks by kakao

Other Decks in Programming

Featured

Transcript