React-pdf: ์ „์ฒด ๋ฌธ์„œ๊ฐ€๋กœ๋“œ๋˜๊ธฐ ์ „์— ์ฒซ ํŽ˜์ด์ง€๋ณด๊ธฐ-์ง€์› ๋ฒ”์œ„ ํ—ค๋”

์— ๋งŒ๋“  2019๋…„ 06์›” 26์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: wojtekmaj/react-pdf

์‹œ์ž‘ํ•˜๊ธฐ ์ „์—-์ฒดํฌ๋ฆฌ์ŠคํŠธ

  • [x] README์—์žˆ๋Š” ๋ฌธ์„œ๋ฅผ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค.
  • [x] ์‹ค์ œ ๊ธฐ๋ณธ ๊ตฌํ˜„์„๋ณด๊ธฐ ์œ„ํ•ด ์ƒ˜ํ”Œ ๋ฐ ํ…Œ์ŠคํŠธ ์Šค์œ„ํŠธ๋ฅผ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.
  • [X]์ด ์งˆ๋ฌธ์ด ์•„์ง ์—†๋Š”์ง€ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹น์‹ ์€ ๋ฌด์—‡์„ ์„ฑ์ทจํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๊นŒ?

ํ”„๋กœ์ ํŠธ ( issue , demo )์—์„œ๋ณด๊ณ ์žˆ๋Š” ํŽ˜์ด์ง€ ๋งŒ๋กœ๋“œํ•˜๊ณ  ์ „์ฒด ๋ฌธ์„œ๊ฐ€๋กœ๋“œ๋˜๊ธฐ ์ „์— ์ฒซ ๋ฒˆ์งธ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋‚ด ์ดํ•ด์—์„œ PDF.js ๋Š” Range ํ—ค๋”๋ฅผ ์ง€์› ํ•˜๊ณ  react-pdf API๋Š” file ์†์„ฑ์— PDFDataRangeTransport ๊ฐœ์ฒด๋ฅผ ํฌํ•จ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์„ค๋ช… ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ ์ด๋Ÿฌํ•œ Range ํ—ค๋”๋ฅผ ๋ณด๋‚ด๋ ค๋ฉด ์–ด๋–ป๊ฒŒํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค!

์‹œ๋„ํ•œ ์†”๋ฃจ์…˜ ์„ค๋ช…

  • [x] ์†Œ์Šค PDF๊ฐ€ ์›น์— ์ตœ์ ํ™”๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธ
  • [x] ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค๊ฐ€ HTTP ๋ฒ”์œ„ ํ—ค๋”๋ฅผ ์ง€์›ํ•˜๋Š”์ง€ ํ™•์ธ

ํ™˜๊ฒฝ

  • ํฌ๋กฌ 75
  • MacOS 10.14.5
  • React-PDF 4.0.5
  • ๋ฐ˜์‘ ์Šคํฌ๋ฆฝํŠธ 3.0.1
  • ๋ฐ˜์‘ 16.8.6
question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

PDF.js ๊ฐœ๋ฐœ์ž์— ๋”ฐ๋ฅด๋ฉด PDF.js ๋Š” ๋ฒ”์œ„ ์‘๋‹ต์˜ gzip ์ธ์ฝ”๋”ฉ์„ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ช…์‹œ ์ ์œผ๋กœ ์„ค์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. PDF.js ๋ฌธ์„œ ์— ๋”ฐ๋ฅด๋ฉด ์‚ฌ์šฉ์ž ์ •์˜ ํ—ค๋”๋ฅผ ์„ค์ •ํ•  ์ˆ˜ options ๊ฐœ์ฒด๋ฅผ PDFjs.getDocument ์— ์ „๋‹ฌํ•˜๋ฏ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

<Document
  options={{
    httpHeaders: {
      'Accept-Encoding': 'Identity',
    }
  }}
  file={"https://example.com/some.pdf"}
>

๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋ ‡์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋‚˜๋Š” ์—ฌ์ „ํžˆ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ์กฐ์‚ฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. pdf.js ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š”,
์˜ˆ, 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 ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰