Pdf.js: ์ „์ž๋กœ pdf.js ์‹คํ–‰ํ•˜๊ธฐ

์— ๋งŒ๋“  2016๋…„ 03์›” 30์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mozilla/pdf.js

์•ˆ๋…•ํ•˜์‹ญ๋‹ˆ๊นŒ,
pdf.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ „์ž ์•ฑ๊ณผ ํ†ตํ•ฉํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ•˜๋Š” ์ฃผ๋œ ์ด์œ ๋Š” ์•ฑ์— pdf ๋ทฐ์–ด๊ฐ€ ์žˆ๊ณ  ๋ฌธ์„œ๋ฅผ ์ธ์‡„ํ•˜๊ธฐ ์œ„ํ•ด์„œ์ž…๋‹ˆ๋‹ค.

์šฐ์„  ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ†ตํ•ฉํ•˜๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค.

  1. ๋ณ„๋„์˜ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ pdf.js๋ฅผ ๋ณต์ œํ•˜๊ณ  _gulp generic_์„ ์‹คํ–‰ํ•˜๊ณ  ๋นŒ๋“œ ๋””๋ ‰ํ† ๋ฆฌ ์•„๋ž˜์— ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ๋‚ด ํ”„๋กœ์ ํŠธ์˜ src ๋””๋ ‰ํ† ๋ฆฌ์— ๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค.
  2. ์—ฌ๊ธฐ์—์„œ ๋‚ด ํ”„๋กœ์ ํŠธ์— ๋…ธ๋“œ ๋ชจ๋“ˆ์„ ํฌํ•จํ•˜์—ฌ: https://www.npmjs.com/package/pdfjs-dist-for-node

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ฒซ ๋ฒˆ์งธ ๊ฒฝ๋กœ์— ๋”ฐ๋ผ ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด html ํŽ˜์ด์ง€์˜ ์บ”๋ฒ„์Šค์— pdf ํŒŒ์ผ(๋ทฐ์–ด ์ปจํŠธ๋กค ์—†์ด)์„ ํ‘œ์‹œ(๊ธฐ๋ณธ์ ์œผ๋กœ ๋ Œ๋”๋ง)ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

</div> <canvas id="theCanvas"></canvas> <div>

     PDFJS.getDocument(pdfPath).then(function getPdfHelloWorld(pdf) {
            pdf.getPage(1).then(function getPageHelloWorld(page) {
              var scale = 1.5;
              var viewport = page.getViewport(scale);

              var canvas = document.getElementById('theCanvas');
              var context = canvas.getContext('2d');
              canvas.height = viewport.height;
              canvas.width = viewport.width;

              var renderContext = {
                canvasContext: context,
                viewport: viewport
              };
              page.render(renderContext);
            });
          });

๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์˜ ์ผ๋ถ€์ผ ๋ฟ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” viewer.html๊ณผ ๊ฐ™์€ ๋ทฐ์–ด ์ปจํŠธ๋กค์„ ์›ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง์ ‘ viewer.html๋กœ ์ƒˆ ์ฐฝ์„ ์—ด๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค.

var pdfPath = __dirname + '/pdfs/trial.pdf'; mainWindow.loadURL('file://' + __dirname + '/generic/web/viewer.html?file=' + pdfPath);

๋ทฐ์–ด๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ pdf ํŒŒ์ผ์„ ๋กœ๋“œํ•˜๋Š” ๋™์•ˆ ์ฝ˜์†”์—์„œ ๋‹ค์Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์žกํžˆ์ง€ ์•Š์Œ(์•ฝ์† ์ค‘) TypeError: PDFJS.getDocument๋Š” ํ•จ์ˆ˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.
Object.pdfView ์—์„œ ์—ด๋ฆฐ ์ƒํƒœ๋กœ ์—ด๊ธฐ
webViewerInitialized์—์„œ (file:///.../src/generic/web/viewer.js:7686:26)

๋‚˜๋Š” ๋‚ด๊ฐ€ ์—ฌ๊ธฐ์„œ ๋ฌด์—‡์„ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๊ถŒ์žฅ๋˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๊นŒ? ๋˜ํ•œ ์ „์ฒด ๋ทฐ์–ด๋ฅผ ์ผ๋ถ€ ์บ”๋ฒ„์Šค ๋˜๋Š” ์ผ๋ถ€ iframe์— ํฌํ•จํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? ๋‚ด๊ฐ€ ์‹œ๋„ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํŠน์ • ์ผ๋ฐ˜์ ์ธ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ํ”„๋กœ์ ํŠธ์— API ๋ชฉ๋ก์ด ์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ์žˆ๋Š” ๊ฒฝ์šฐ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

  • ๋‘ ๋ฒˆ์งธ ๊ฒฝ๋กœ๋ฅผ ๋”ฐ๋ผ ๋…ธ๋“œ ๋ชจ๋“ˆ์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚ด๊ฐ€ ์—ฌ๊ธฐ์„œ ๊ฑฑ์ •ํ•˜๋Š” ๊ฒƒ์€ ์ด ํ”„๋กœ์ ํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ๋  ๋•Œ ์ž์ฃผ ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰ ๋ฆด๋ฆฌ์Šค๋Š” 1๋…„ ์ „์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฑฐ๊ธฐ์—๋Š” ๋‹ค์‹œ API๊ฐ€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ผ๋‹จ ๊ณ„ํš์„ ์ ‘์—ˆ๋‹ค.

๋ˆ„๊ตฐ๊ฐ€ ์—ฌ๊ธฐ์—์„œ ๋‚˜๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค...

๊ตฌ์„ฑ:

  • ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฒ„์ „: Electron
  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „: OSX 10.10.5
  • PDF.js ๋ฒ„์ „: 0.8.0

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

pdf.js ํŒŒ์ผ ๋˜๋Š” PDFJS.version ์†์„ฑ ์ฐธ์กฐ

๋ฒ„์ „:1.4.174

๋˜ํ•œ, ๋‚˜๋Š” ๋ฌธ์ œ๋ฅผ ์•Œ์•„ ๋ƒˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ ์˜ฌ๋ฐ”๋ฅธ ๋‚ด์šฉ์„ ๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ viewer.html URL์ด ์žˆ๋Š” ์ฐฝ์„ ์—ด ๋•Œ; window ์†์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

webPreferences: { nodeIntegration: false }

๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ ์ง€๊ธˆ ์ž˜๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋„์™€์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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

PDF.js ๋ฒ„์ „: 0.8.0

์ •๋ง ์˜ค๋ž˜๋œ ๋ฒ„์ „์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ๋ฆด๋ฆฌ์Šค(๋˜๋Š” gulp generic one)์—์„œ ์ด๋ฏธ ์‚ฌ์ „ ๋นŒ๋“œ๋œ ๋ฒ„์ „์€ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ, pdf๋ฅผ Uint8Array์— ์ง์ ‘ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์€ ์˜ˆ์™ธ์ž…๋‹ˆ๋‹ค.

PDFJS.getDocument๋Š” ํ•จ์ˆ˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

์ด๋Š” ํ•ต์‹ฌ PDF.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ('./build/pdf.js' ํŒŒ์ผ)๊ฐ€ ๋กœ๋“œ๋˜์ง€ ์•Š์•˜์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์‹ ์†ํ•œ ๋‹ต๋ณ€์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ •๋ง ์˜ค๋ž˜๋œ ๋ฒ„์ „์ž…๋‹ˆ๋‹ค.

์–ด๋–ป๊ฒŒ ๊ทธ ์ด์ „ ๋ฒ„์ „์„ ์–ป์—ˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด git clone git://github.com/mozilla/pdf.js.git ์™ธ์—๋Š” ์•„๋ฌด ๊ฒƒ๋„ ํ•˜์ง€ ์•Š์•˜๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์—ฌ๊ธฐ์—์„œ ๋ณด๋ฉด package.json์€ ์—ฌ์ „ํžˆ โ€‹โ€‹0.8.0์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ ๋ฆด๋ฆฌ์Šค(๋˜๋Š” ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๊ฟ€๊บฝ ๋Œ๋ฆฌ ๊ฒฝ์šฐ)์—์„œ ์ด๋ฏธ ๋ฏธ๋ฆฌ ๋นŒ๋“œ๋œ ๋ฒ„์ „์€ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ, pdf๋ฅผ Uint8Array์— ์ง์ ‘ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์€ ์˜ˆ์™ธ์ž…๋‹ˆ๋‹ค.

์ด ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด์ง„ ์ง€ํผ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? .

์ด๋Š” ํ•ต์‹ฌ PDF.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ('./build/pdf.js' ํŒŒ์ผ)๊ฐ€ ๋กœ๋“œ๋˜์ง€ ์•Š์•˜์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

gulp generic์„ ํ•œ ํ›„ ๋‘ ๊ณณ์—์„œ pdf.js์™€ pdf.worker.js๋ฅผ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜๋Š” ์ผ๋ฐ˜ ๋””๋ ‰ํ† ๋ฆฌ ์™ธ๋ถ€์— ํ•˜๋‚˜๋Š” generic/build/ ๋””๋ ‰ํ† ๋ฆฌ ๋‚ด๋ถ€์— ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ํ˜„์žฌ ๋ฐ”๊นฅ์ชฝ์„ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋‹ค. ๋‚ด๊ฐ€ ์ž˜๋ชป๋œ ๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฒฝ์šฐ ์•Œ๋ ค์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๋‹ค์‹œ ํ•œ ๋ฒˆ ๋„์›€์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

package.json์€ ์—ฌ์ „ํžˆ โ€‹โ€‹0.8.0์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

package.json์—๋Š” ๋นŒ๋“œ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฒ„์ „์ด ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ฌ๋ฐ”๋ฅธ ๋ฒ„์ „ ๋ฒˆํ˜ธ๋Š” pdf.js ํŒŒ์ผ ๋˜๋Š” PDFJS.version ์†์„ฑ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

๋‚ด๊ฐ€ ์ž˜๋ชป๋œ ๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฒฝ์šฐ ์•Œ๋ ค์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๋‘˜ ๋‹ค ๋™์ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ „์ฒด "generic/" ํด๋”๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฏ€๋กœ pdf.js๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ ์œ„์น˜์— ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

pdf.js ํŒŒ์ผ ๋˜๋Š” PDFJS.version ์†์„ฑ ์ฐธ์กฐ

๋ฒ„์ „:1.4.174

๋˜ํ•œ, ๋‚˜๋Š” ๋ฌธ์ œ๋ฅผ ์•Œ์•„ ๋ƒˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ ์˜ฌ๋ฐ”๋ฅธ ๋‚ด์šฉ์„ ๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ viewer.html URL์ด ์žˆ๋Š” ์ฐฝ์„ ์—ด ๋•Œ; window ์†์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

webPreferences: { nodeIntegration: false }

๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ ์ง€๊ธˆ ์ž˜๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋„์™€์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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