diff --git a/packages/react-pdf/storybook/canvas.stories.tsx b/packages/react-pdf/storybook/canvas.stories.tsx index 68034f8..9bd01f6 100644 --- a/packages/react-pdf/storybook/canvas.stories.tsx +++ b/packages/react-pdf/storybook/canvas.stories.tsx @@ -11,7 +11,7 @@ const meta = { export default meta const PDF_URL = - 'https://s3.ap-northeast-2.amazonaws.com/shinhwa-good-info/idbins/%EB%AC%B4%EB%B0%B0%EB%8B%B9%ED%94%84%EB%A1%9C%EB%AF%B8%EB%9D%BC%EC%9D%B4%ED%94%84%EC%B0%B8%EC%A2%8B%EC%9D%80%EC%9A%B4%EC%A0%84%EC%9E%90%EC%83%81%ED%95%B4%EB%B3%B4%ED%97%982210___2022-10-01___%EC%95%BD%EA%B4%80.pdf' + 'https://fs.pstatic.net/contents/resource/loan/personal-compare/required/0/1668583261818/gi_creditLoanNF_02.pdf' export function 기본_Canvas() { const [pdfInfo, setPdfInfo] = useState() diff --git a/packages/react-pdf/storybook/svg.stories.tsx b/packages/react-pdf/storybook/svg.stories.tsx new file mode 100644 index 0000000..57ac846 --- /dev/null +++ b/packages/react-pdf/storybook/svg.stories.tsx @@ -0,0 +1,57 @@ +import React, {useEffect, useState} from 'react' + +import {getPdfDocument} from '../dist/cjs' +import * as pdfjs from '../dist/cjs/pdf' + +import type {PDFDocumentProxy} from '../src/pdfjs-dist/types/pdfjs' + +const meta = { + title: 'React PDF', + component: 기본_SVG, +} +export default meta + +const PDF_URL = + 'https://fs.pstatic.net/contents/resource/loan/personal-compare/required/0/1668583261818/gi_creditLoanNF_02.pdf' + +export function 기본_SVG() { + const [pdfInfo, setPdfInfo] = useState() + + useEffect(() => { + ;(async () => { + const pdf = await getPdfDocument({file: PDF_URL}) + setPdfInfo(pdf) + })() + }, []) + + if (!pdfInfo) { + return null + } + + return ( + <> + {Array.from({length: pdfInfo.numPages}).map((_, index) => { + return ( +
{ + if (!node) { + return + } + const page = await pdfInfo.getPage(index + 1) + const viewport = page.getViewport({scale: 1, rotation: 0}) + const operatorList = await page.getOperatorList() + + node.setAttribute('width', `${viewport.width}px`) + node.setAttribute('height', `${viewport.height}px`) + + const svgGfx = new pdfjs.SVGGraphics(page.commonObjs, page.objs) + const svg = await svgGfx.getSVG(operatorList, viewport) + node.appendChild(svg) + }} + /> + ) + })} + + ) +}