Pdf.js: Angular + pdf.js์˜ IE 11 ํ˜ธํ™˜์„ฑ ํ™œ์„ฑํ™”

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

๊ตฌ์„ฑ:

  • ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฒ„์ „: IE 11
  • ์šด์˜ ์ฒด์ œ ๋ฐ ํ•ด๋‹น ๋ฒ„์ „: ๋ชจ๋‘
  • PDF.js ๋ฒ„์ „: 1.4.0
  • AngularJs ๋ฒ„์ „: 1.5.11

๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ๋‹จ๊ณ„:

  1. ์ž๋™ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ๊ณผ ํ•จ๊ป˜ AngularJS 1.5.11 ์‚ฌ์šฉ
  2. Angular์˜ ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ ์•ž์— PDF.js ๋ฒ„์ „ 1.4.0 ํฌํ•จ

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? (์Šคํฌ๋ฆฐ์ƒท ์ถ”๊ฐ€)

  • Angular๋Š” PDF.js์™€ ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
  • PDF.js๋Š” ๊ธฐ๋ณธ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ shimmed ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์—์„œ ๋ˆ„๋ฝ๋œ API๋ฅผ ๋ž˜ํ•‘ํ•ฉ๋‹ˆ๋‹ค.

๋ฌด์—‡์ด ์ž˜๋ชป๋˜์—ˆ๋‚˜์š”? (์Šคํฌ๋ฆฐ์ƒท ์ถ”๊ฐ€)

  • https://github.com/angular/angular.js/issues/15772 ์ฐธ์กฐ
    ํ˜„์žฌ pdf.js๋Š” document.currentScript๋ฅผ ์ •์˜ํ•˜์ง€๋งŒ link.origin์ด๋‚˜ link.protocol์€ ์ •์˜ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. angular๊ฐ€ ์‹œ์ž‘๋˜๋ฉด ์ž๋™์œผ๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์ด ํ—ˆ์šฉ๋˜๋Š”์ง€ ํ™•์ธํ•˜๊ณ  currentScript๋ฅผ ํ™•์ธํ•˜๊ณ  ์ด๊ฒƒ์ด IE๋ฅผ ํ•„ํ„ฐ๋งํ•˜๊ธฐ์— ์ถฉ๋ถ„ํ•˜๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, currentScript๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ์ž๋™์œผ๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒ€์‚ฌ๋Š” pdf.js์™€ ํ•จ๊ป˜ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ด์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฏ€๋กœ ์†Œ์œ ํ•˜์ง€ ์•Š์€ ๊ฐœ์ฒด์˜ ์†์„ฑ์„ ์ˆ˜์ •ํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์ง€์›๋˜๋Š” ์ผ๋ถ€ ํ™˜๊ฒฝ์—์„œ ๋ˆ„๋ฝ๋œ ํŠน์ • API๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๊ธฐ๋ณธ API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ shimmed ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์—์„œ ์‚ฌ์šฉ๋ฒ•์„ ๋ž˜ํ•‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ทฐ์–ด ๋งํฌ(mozilla.github.io/pdf.js๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ ๋˜๋Š” Firefox/Chrome ํ™•์žฅ์œผ๋กœ ํ˜ธ์ŠคํŒ…๋˜๋Š” ๊ฒฝ์šฐ):
http://plnkr.co/edit/YFCQM2Px0QU0KnGzsAlM?p=preview

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

๋‹ค์†Œ IE11-๋ถˆ์™„์ „ํ•œ ๋ณด์•ˆ ๊ฒ€์‚ฌ Angular ๋…ผ๋ฆฌ์—์„œ PDF.js ํด๋ฆฌํ•„๋กœ ๋น„๋‚œ์„ ์ „๊ฐ€ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋“ค๋ฆฝ๋‹ˆ๋‹ค... ์ข‹์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฉ์ฐจ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ„๋‹จํ•œ ๋ฒ„๊ทธ๋กœ ํ‘œ์‹œ:

  1. document.location.origin ๋Š” 'origin' ์†์„ฑ์ด ์—†์œผ๋ฉด ์ƒˆ URL(document.location.href).origin์œผ๋กœ ์„ค์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  2. HTMLScriptElement.prototype ๋Š” ์œ„์™€ ์œ ์‚ฌํ•œ ๋…ผ๋ฆฌ๋ฅผ ๊ฐ€์ง„ ์˜ค๋ฆฌ์ง„ ๋ฐ ํ”„๋กœํ† ์ฝœ ๊ฒŒํ„ฐ๋ฅผ ๊ฐ€์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

@yurydelendik ์ €์—๊ฒŒ ์ด๊ฒƒ์€ MooTools๊ฐ€ ๋ถ€๋ถ„ ํด๋ฆฌํ•„์„ ์ ์šฉํ•˜๊ณ  ์ด์— ๋”ฐ๋ผ ์›น์—์„œ ์ฝ”๋“œ๊ฐ€ ์‹œ์ž‘๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ช‡ ๊ฐ€์ง€ Web API์˜ ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ–ˆ๋˜ ์ƒํ™ฉ๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

ํด๋ฆฌํ•„๋ง์€ ์œ„ํ—˜ํ•ฉ๋‹ˆ๋‹ค. IMO๋Š” ์™„์ „ํ•œ ํด๋ฆฌํ•„๋กœ๋งŒ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•˜๋ฉฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹Œ ์ตœ์ข… ์•ฑ์—์„œ๋งŒ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์–ด๋””์—์„œ๋‚˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ํŠน์ • API๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๊ธฐ๋ณธ API๋ฅผ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜๋กœ ๋ž˜ํ•‘ํ•˜๊ณ  ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด์™€ ๊ฐ™์€ ๊ฐ€๋Šฅํ•œ ๋ฒ„๊ทธ์˜ ์ „์ฒด ํด๋ž˜์Šค๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

์š”์ปจ๋Œ€: ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฝ”๋“œ๋Š” ์†Œ์œ ํ•˜์ง€ ์•Š์€ ๊ฐœ์ฒด(์˜ˆ: ๊ธฐ๋ณธ ๋ธŒ๋ผ์šฐ์ € ์ „์—ญ)๋ฅผ ์ˆ˜์ •ํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

ํด๋ฆฌํ•„์€ ์œ„ํ—˜ํ•˜๋‹ค

@mgol ์˜ค, ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ „์ฒด PDF.js ๋ทฐ์–ด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์€ ์ž์ฒด ์ƒŒ๋“œ๋ฐ•์Šค(iframe ๊ถŒ์žฅ)์— ์žˆ์–ด์•ผ ํ•˜์ง€๋งŒ ์‚ฌ๋žŒ๋“ค์€ ๋” ํฐ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๋‚ด์—์„œ ๊ณ„์† ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ทธ์— ๋”ฐ๋ผ ๋Œ€์‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฝ”๋“œ๋Š” ์†Œ์œ ํ•˜์ง€ ์•Š์€ ๊ฐœ์ฒด(์˜ˆ: ๊ธฐ๋ณธ ๋ธŒ๋ผ์šฐ์ € ์ „์—ญ)๋ฅผ ์ˆ˜์ •ํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํ˜•์‹ํ™”๋œ ๋ฐฐ์—ด์ด ์—†์œผ๋ฉด Promise PDF.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋™์ผํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ „์—ญ ๊ฐœ์ฒด๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š์Œ์œผ๋กœ์จ ์ฝ”๋“œ๋ฅผ ์ฝ์„ ์ˆ˜ ์—†๊ฒŒ ๋งŒ๋“ค๊ณ  ๋Œ€๋ถ€๋ถ„์˜ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์„ฑ๋Šฅ์„ ์ €ํ•˜์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํ˜•์‹ํ™”๋œ ๋ฐฐ์—ด์ด ์—†์œผ๋ฉด Promise PDF.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋™์ผํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ „์—ญ ๊ฐœ์ฒด๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š์Œ์œผ๋กœ์จ ์ฝ”๋“œ๋ฅผ ์ฝ์„ ์ˆ˜ ์—†๊ฒŒ ๋งŒ๋“ค๊ณ  ๋Œ€๋ถ€๋ถ„์˜ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์„ฑ๋Šฅ์„ ์ €ํ•˜์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜๋“œ์‹œ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ์ „์—ญ์„ ๊ฐ€๋ฆฌ๋Š” ์ž์ฒด ๋‚ด๋ถ€ ๋ณ€์ˆ˜ ์„ธํŠธ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ชจ๋“  ๊ฒฝ์šฐ๋ฅผ ๋‹ค๋ฃจ์ง€๋Š” ์•Š์„ ์ˆ˜ ์žˆ์ง€๋งŒ ์ ์–ด๋„ ์•ฝ์†์€ ๊ดœ์ฐฎ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ:

var Promise = window.Promise || PROMISE_POLYFILL;

PDF.js ์ƒ๋‹จ์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ์ „์—ญ์„ ๊ฑด๋“œ๋ฆฌ์ง€ ์•Š๊ณ  ์ฝ”๋“œ์—์„œ ๋ณ€๊ฒฝ ์—†์ด Promise ๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์˜ ๊ฐ„๋‹จํ•œ ๋ณ„์นญ์ด๋ฏ€๋กœ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ๊ฒฝ์šฐ์— ๊ทธ๋ ‡๊ฒŒ ์‰ฝ์ง€๋Š” ์•Š์„ ์ˆ˜๋„ ์žˆ์Œ์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค(์˜ˆ: ๋ช‡ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋งŒ ํด๋ฆฌํ•„ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ)

PDF.js ์ฝ”๋“œ๊ฐ€ ES6 ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๋„๋ก ๋ณ€ํ™˜ ์ค‘์ž…๋‹ˆ๋‹ค. ํฌ์žฅ ํ”„๋กœ๊ทธ๋žจ์ด ์ž๋™์œผ๋กœ ํด๋ฆฌํ•„์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ํ•œ ์œ„์˜ ์ ‘๊ทผ ๋ฐฉ์‹์€ atm์—์„œ ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ๊ฐ๋„ ๋…ผ๋ฆฌ ๋˜๋Š” pdf.js ํ˜ธํ™˜์„ฑ ์ ‘๊ทผ ๋ฐฉ์‹์— ๋Œ€ํ•œ ๋…ผ์˜๋กœ ๋ฐ”๊พธ์ง€ ์•Š๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํด๋ฆฌํ•„์„ ์ˆ˜์ •ํ•˜์—ฌ ๊ฐ๋„๋ฅผ ์ž˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. PR ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค :)

๋‹ค๋ฅธ ์ƒ๊ฐ์œผ๋กœ ์ด ๋ฌธ์ œ๋Š” ํ•ด๊ฒฐ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ข…๋ฃŒํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. Angular+PDF.js+IE11 ์‹ค์ œ ์‚ฌ์šฉ์— ๋Œ€ํ•œ ํ™•์ธ์ด ์—†์Šต๋‹ˆ๋‹ค. ์žˆ๋Š” ๊ฒฝ์šฐ Angular.js๋ฅผ ํŒจ์น˜ํ•˜์—ฌ ๊ฐ๋„ ์ธก๋ฉด์—์„œ ์‰ฝ๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์ €๋Š” ์ด๊ฒƒ์ด ์˜ค๋ž˜๋œ ์ฃผ์ œ๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์œ„์—์„œ ์„ค๋ช…ํ•œ ๋ฌธ์ œ์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

PDF.js์™€ ํ•จ๊ป˜ Angular 5๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ๊ณ  IE11์„ ์ง€์›ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” Angular์˜ ์ดˆ๋ณด์ž์ด๋ฏ€๋กœ "Angular.js๋ฅผ ํŒจ์น˜"ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •ํ™•ํžˆ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒฐํ•จ์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ง€์นจ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

@elliotstoner ์ด ๋ฌธ์ œ๋Š” Angular(2+)๊ฐ€ ์•„๋‹Œ AngularJS ํ˜ธํ™˜์„ฑ์— ๊ด€ํ•œ ๊ฒƒ์ด๋ฉฐ ์ˆ˜๋™ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋Œ€์‹  ng-app ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. Angular 2+๋Š” ์ž๋™ ๋ถ€ํŠธ์ŠคํŠธ๋ž˜ํ•‘๋„ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ด ๋ฌธ์ œ๋Š” ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@mgol Ah ok - ๊ทธ๋Ÿผ ์ƒˆ๋กœ์šด ์ด์Šˆ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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