Pdf.js: μ—¬λŸ¬ render() μž‘μ—… 쀑에 λ™μΌν•œ μΊ”λ²„μŠ€λ₯Ό μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 08μ›” 28일  Β·  13μ½”λ©˜νŠΈ  Β·  좜처: mozilla/pdf.js

μ΅œμ‹  pdfjs 버전(2.0.550)을 μ‚¬μš©ν•˜λ©΄ λ‹€μŒ 였λ₯˜κ°€ λ°œμƒν•©λ‹ˆλ‹€.

μ—¬λŸ¬ render() μž‘μ—… 쀑에 λ™μΌν•œ μΊ”λ²„μŠ€λ₯Ό μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€.

λ Œλ”λ§μ— μ‚¬μš©ν•˜λŠ” μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

function renderPage(pageNumber, renderOptions) {
                var documentId = renderOptions.documentId;
                var pdfDocument = renderOptions.pdfDocument;
                var scale = renderOptions.scale;
                var rotate = renderOptions.rotate;
                // Load the page and annotations
                return Promise.all([pdfDocument.getPage(pageNumber), _PDFJSAnnotate2.default.getAnnotations(documentId, pageNumber)]).then(function (_ref) {
                    var _ref2 = _slicedToArray(_ref, 2);
                    var pdfPage = _ref2[0];
                    var annotations = _ref2[1];
                    var page = document.getElementById('pageContainer' + pageNumber);
                    var svg = page.querySelector('.annotationLayer');
                    var canvas = page.querySelector('.canvasWrapper canvas');
                    var canvasContext = canvas.getContext('2d', {alpha: false});
                    var viewport = pdfPage.getViewport(scale, rotate);
                    var transform = scalePage(pageNumber, viewport, canvasContext);
                    var renderContext = {
                        canvasContext: canvasContext,
                        viewport: viewport,
                        transform: transform
                    };
                    // Render the page
                    return Promise.all([pdfPage.render(renderContext), _PDFJSAnnotate2.default.render(svg, viewport, annotations)]).then(function () {
                        // Text content is needed for a11y, but is also necessary for creating
                        // highlight and strikeout annotations which require selecting text.
                        return pdfPage.getTextContent({normalizeWhitespace: true}).then(function (textContent) {
                            return new Promise(function (resolve, reject) {// Render text layer for a11y of text content
                                var textLayer = page.querySelector('.textLayer');
                                var textLayerFactory = new pdfjsViewer.DefaultTextLayerFactory();
                                var textLayerBuilder = textLayerFactory.createTextLayerBuilder(textLayer, pageNumber - 1, viewport);
                                textLayerBuilder.setTextContent(textContent);
                                textLayerBuilder.render();// Enable a11y for annotations
                                // Timeout is needed to wait for `textLayerBuilder.render`
                                setTimeout(function () {
                                    try {
                                        (0, _renderScreenReaderHints2.default)(annotations.annotations);
                                        resolve();
                                    } catch (e) {
                                        reject(e);
                                    }
                                });
                            });
                        });
                    }).then(function () {// Indicate that the page was loaded
                        page.setAttribute('data-loaded', 'true');
                        return[pdfPage, annotations];
                    });
                });
            }

μ½”λ“œμ˜ ν•΄λ‹Ή 뢀뢄은 주석 js ν”„λ‘œμ νŠΈμ—μ„œ κ°€μ Έμ˜¨ κ²ƒμž…λ‹ˆλ‹€.
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js

λ³΄μ‹œλ‹€μ‹œν”Ό λͺ¨λ“  νŽ˜μ΄μ§€μ—λŠ” 자체 μΊ”λ²„μŠ€κ°€ μžˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λ‚˜λŠ” μ™œ μ—¬μ „νžˆ 그런 였λ₯˜κ°€ λ°œμƒν•˜λŠ”μ§€ λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€.

무엇이 잘λͺ»λ˜κ³  μ–΄λ””λ₯Ό 쑰사해야 ν•©λ‹ˆκΉŒ?

1-other

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이 λ¬Έμ œμ— λŒ€ν•œ μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

λͺ¨λ“  13 λŒ“κΈ€

@atnsm bro Angular 2+μ—μ„œ PDF 주석을 μ‚¬μš©ν•˜κ³  μžˆλŠ”μ§€ μ•Œ 수 μžˆμŠ΅λ‹ˆκΉŒ?

λ‚œ κ·Έλ ‡κ²Œ μƒκ°ν•˜μ§€ μ•Šμ•„. λ‹€μŒμ€ λͺ¨λ“  쒅속성 λͺ©λ‘μž…λ‹ˆλ‹€.
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

같은 문제, 이 문제λ₯Ό ν•΄κ²°ν•˜λŠ” 방법.

pdfjs-dist μ£Όμœ„μ˜ 래퍼인 react-pdf-js μ—μ„œ λ™μΌν•œ 였λ₯˜κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.

μ΅œμ‹  pdfjs 버전(2.0.550)을 μ‚¬μš©ν•˜λ©΄ λ‹€μŒ 였λ₯˜κ°€ λ°œμƒν•©λ‹ˆλ‹€.

이 λ¬Έμ œλŠ” #9456의 쀑볡일 κ°€λŠ₯성이 맀우 λ†’μœΌλ©°, 이 경우 PR #9853( 2.0.550 버전에 포함될 μ‹œκ°„μ΄ λ˜μ§€ μ•ŠμŒ)에 μ˜ν•΄ μˆ˜μ •λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

λ‚˜λ„ κ·Έλ ‡κ²Œ 말할 것이닀. 이것을 λ‹«κ³  μ΅œμ’… 2.0 λ¦΄λ¦¬μŠ€κ°€ μ™„λ£Œλ˜κ³  λ¬Έμ œκ°€ 남아 있으면 μ–Έμ œλ“ μ§€ λ‹€μ‹œ μ—΄ 수 μžˆμŠ΅λ‹ˆλ‹€.

같은 λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€. 도움이 ν•„μš”ν•œ.

이 λ¬Έμ œμ— λŒ€ν•œ μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

각도 8μ—μ„œ pdfjsλ₯Ό μ‚¬μš©ν•  λ•Œ 이 λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. 희망이 λˆ„κ΅°κ°€λ₯Ό λ„μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€.

곡개 ngOnDestroy() {
if (this._pdf) {
this._pdf.destroy();
}
if (this.renderTask) {
this.renderTask.cancel();
}
}
λ Œλ”λ§ κΈ°λŠ₯μ—μ„œ dom λ¬Έμ„œ 둜 μΏΌλ¦¬ν•˜λŠ” λŒ€μ‹  this.element.nativeElement.children[0] 에 μ˜ν•΄ μΊ”λ²„μŠ€ μš”μ†Œλ₯Ό 가져와야 ν•©λ‹ˆλ‹€.

이 λ¬Έμ œμ— λŒ€ν•œ μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

λ™μΌν•œ λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 단일 μΊ”λ²„μŠ€λ₯Ό μ‚¬μš©ν•˜μ—¬ λ¬Έμ„œλ₯Ό ν‘œμ‹œν•˜κ³  μ‚¬μš©μžλŠ” ν‘œμ‹œν•  μ—¬λŸ¬ λ¬Έμ„œ 쀑 ν•˜λ‚˜λ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ™μΌν•œ λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 단일 μΊ”λ²„μŠ€λ₯Ό μ‚¬μš©ν•˜μ—¬ λ¬Έμ„œλ₯Ό ν‘œμ‹œν•˜κ³  μ‚¬μš©μžλŠ” ν‘œμ‹œν•  μ—¬λŸ¬ λ¬Έμ„œ 쀑 ν•˜λ‚˜λ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.

μƒˆ pdf νŒŒμΌμ„ λ Œλ”λ§ν•˜κΈ° 전에 pdf λ Œλ”λ§ ν”„λ‘œμ„ΈμŠ€λ₯Ό μ·¨μ†Œν•œ λ‹€μŒ μ œκ±°ν•΄μ•Ό ν•©λ‹ˆλ‹€.

λˆ„κ΅°κ°€κ°€ 같은 νŽ˜μ΄μ§€λ₯Ό μ·¨μ†Œν•˜κ³  λ‹€μ‹œ λ Œλ”λ§ν•˜λŠ” μ μ ˆν•œ 방법을 μ„€λͺ…ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

λ‚΄κ°€ λ³Έ λ‹€λ₯Έ λ¬Έμ œμ—μ„œ ν•œ λ²ˆμ— 두 개의 λ Œλ”λ§ μž‘μ—…μ„ μ‹€ν–‰ν•˜λŠ” 데 λ™μΌν•œ μΊ”λ²„μŠ€λ₯Ό μ‚¬μš©ν•΄μ„œλŠ” μ•ˆ λ©λ‹ˆλ‹€. 그리고 이전 μž‘μ—…μ΄ μ™„λ£Œλ  λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦¬κ±°λ‚˜(ν•˜κ³  싢지 μ•Šμ€ μž‘μ—…) μ·¨μ†Œν•΄μ•Ό ν•©λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ 이전 μž‘μ—…μ—μ„œ cancel λ₯Ό ν˜ΈμΆœν•΄λ„ νŽ˜μ΄μ§€κ°€ 거꾸둜 λ Œλ”λ§λ˜λŠ” λ¬Έμ œκ°€ μ—¬μ „νžˆ ν•΄κ²°λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ΄λŠ” λ™μΌν•œ μΊ”λ²„μŠ€μ—μ„œ 두 개의 λ Œλ”λ§ μž‘μ—…μ„ μ‹€ν–‰ν•˜λŠ” 경우 λ°œμƒν•˜λŠ” κ²ƒμœΌλ‘œ μΆ”μ •λ©λ‹ˆλ‹€.

@huannxdev 의 μ†”λ£¨μ…˜λ„ pdfλ₯Ό νŒŒκ΄΄ν•΄μ•Ό ν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 단일 νŽ˜μ΄μ§€λ₯Ό λ‹€μ‹œ λ Œλ”λ§ν•˜κΈ° μœ„ν•΄ λ‹€μ‹œ λ‘œλ“œν•˜κ³  μ‹Άμ§€λŠ” μ•ŠμŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰