์์ํ๊ธฐ ์ ์-์ฒดํฌ๋ฆฌ์คํธ
๋น์ ์ ๋ฌด์์ ์ฑ์ทจํ๋ ค๊ณ ํฉ๋๊น?
ํ๋ก์ ํธ ( issue , demo )์์๋ณด๊ณ ์๋ ํ์ด์ง ๋ง๋ก๋ํ๊ณ ์ ์ฒด ๋ฌธ์๊ฐ๋ก๋๋๊ธฐ ์ ์ ์ฒซ ๋ฒ์งธ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๊ณ ์ถ์ต๋๋ค.
๋ด ์ดํด์์ PDF.js ๋ Range ํค๋๋ฅผ ์ง์ ํ๊ณ react-pdf
API๋ file
์์ฑ์ PDFDataRangeTransport
๊ฐ์ฒด๋ฅผ ํฌํจ ํ ์ ์๋ค๊ณ ์ค๋ช
ํฉ๋๋ค. ํ์ง๋ง ์ค์ ๋ก ์ด๋ฌํ Range ํค๋๋ฅผ ๋ณด๋ด๋ ค๋ฉด ์ด๋ป๊ฒํด์ผํ ์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค!
์๋ํ ์๋ฃจ์ ์ค๋ช
ํ๊ฒฝ
์๋
ํ์ธ์,
์, React-PDF๊ฐ pdf.js๋ก ์ ๋ฌํ๊ธฐ ๋๋ฌธ์ PDFDataRangeTransport๊ฐ ์ง์๋์ด์ผํฉ๋๋ค. PDFDataRangeTransport ๊ฐ์ฒด ์์ฑ ์์์ด ํญ๋ชฉ ์ ์ฐพ์์ต๋๋ค.
์ํ๋ ๋์์ ์ป๋ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ URL์ file
prop์ผ๋ก ์ ๋ฌํ๋ ๊ฒ์
๋๋ค. ์ ์๋ํฉ๋๋ค : https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#range
๋ต์ฅ์ ๋ณด๋ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค (๊ทธ๋ฆฌ๊ณ ๊ทธ ๋ฌธ์ ์ ๋ํ ๋ฉ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ) @wojtekmaj!
๋ถํํ๋ URL์ ํ์ผ ์ํ ( source , demo )์ผ๋ก ์ ๋ฌํ์ง๋ง ์ ์ฒด ๋ฌธ์๋ฅผ ๊ฐ์ ธ์จ ํ์ ๋ง โโ๋ ๋๋ง๋ฉ๋๋ค.
๋ํ PDF ํ์ผ์ ๋ํ ์์ฒญ์ ๋ฒ์ ํค๋๊ฐ์๋ ๊ฒ์ผ๋ก ํ์๋ฉ๋๋ค.
์๋ง๋์ด ์กฐ๊ฑด๋ฌธ์ ๋ฌธ์์ด์ ์ ๋ฌํ๋ฉด ์ฌ์ค ์ด ์๋๊น์?
// File is PDFDataRangeTransport
if (file instanceof PDFDataRangeTransport) {
return { range: file };
}
PDF.js ๊ฐ๋ฐ์์ ๋ฐ๋ฅด๋ฉด PDF.js ๋ ๋ฒ์ ์๋ต์ gzip
์ธ์ฝ๋ฉ์ ์ง์ํ์ง ์์ผ๋ฏ๋ก ๋ช
์ ์ ์ผ๋ก ์ค์ ํด์ผํฉ๋๋ค. PDF.js ๋ฌธ์ ์ ๋ฐ๋ฅด๋ฉด ์ฌ์ฉ์ ์ ์ ํค๋๋ฅผ ์ค์ ํ ์ options
๊ฐ์ฒด๋ฅผ PDFjs.getDocument
์ ์ ๋ฌํ๋ฏ๋ก ๋ค์๊ณผ ๊ฐ์ด ์๋ํฉ๋๋ค.
<Document
options={{
httpHeaders: {
'Accept-Encoding': 'Identity',
}
}}
file={"https://example.com/some.pdf"}
>
๊ทธ๋ฌ๋ ๊ทธ๋ ์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ ์ฌ์ ํ ๋ฌด์จ ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ์กฐ์ฌํ๊ณ ์์ต๋๋ค. pdf.js ๋ฌธ์ ์ธ ๊ฒ ๊ฐ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
PDF.js ๊ฐ๋ฐ์์ ๋ฐ๋ฅด๋ฉด PDF.js ๋ ๋ฒ์ ์๋ต์
gzip
์ธ์ฝ๋ฉ์ ์ง์ํ์ง ์์ผ๋ฏ๋ก ๋ช ์ ์ ์ผ๋ก ์ค์ ํด์ผํฉ๋๋ค. PDF.js ๋ฌธ์ ์ ๋ฐ๋ฅด๋ฉด ์ฌ์ฉ์ ์ ์ ํค๋๋ฅผ ์ค์ ํ ์options
๊ฐ์ฒด๋ฅผPDFjs.getDocument
์ ์ ๋ฌํ๋ฏ๋ก ๋ค์๊ณผ ๊ฐ์ด ์๋ํฉ๋๋ค.๊ทธ๋ฌ๋ ๊ทธ๋ ์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ ์ฌ์ ํ ๋ฌด์จ ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ์กฐ์ฌํ๊ณ ์์ต๋๋ค. pdf.js ๋ฌธ์ ์ธ ๊ฒ ๊ฐ์ต๋๋ค.