Pdf.js: 무작위 / 명백한 "굵게"/ 손상

모든 뷰에서 발생하는 대량 다운로드 때문에 작업자를 비활성화 할 수는 없습니다.

이 부분을 설명해 주시겠습니까?

getDocument를 여러 번 사용하려는 경우 단일 PDFWorker 인스턴스를 사용하십시오. 글꼴이 손상되는 원인을 말하기는 어렵지만 작업 예제에 대한 링크가 있으면 약간의 빛을 발할 수 있습니다. 문제를 일으키는 예제를 생성 / 게시 할 수 있습니까?

알겠습니다. 링크를 쉽게 게시 할 수 없습니다. 작업자가 활성화 된 상태에서 실행하면 100 % 작동합니다. 비활성화 플래그를 설정하면 위에 표시된 문제가 무작위로 표시됩니다.

저는 "왜"작업자를 비활성화하고 있는지 자세히 설명하여 "작업자를 활성화"라는 응답을 시작했습니다. 즉, 많은 작은 PDF를 상당히 빠르게 표시하고 pdf_worker.js 용 1.2Mb 다운로드를 추가했습니다. 각 디스플레이는 실용적이지 않습니다. 웹 작업자 코드를 살펴보고 작업자가 호출 된 .js 스크립트를 캐시 할 수있는 옵션이 있는지 확인했지만 아무것도 찾지 못했습니다.

내 초기 추측 (효과를 기반으로)은 스크립트가 각 인스턴스에 대해로드되면 올바르게 지워지는 전역 범위가 어딘가에있어 스크립트 된 작업자가 반복적으로 재사용되면 문제가 발생한다는 것입니다. 그러나 (!) 문제가 FIRST pdf 디스플레이에서 발생할 수 있다는 점을 감안할 때 무엇을보아야할지 알기 위해 약간의 손실이 있습니다.

저는 "왜"작업자를 비활성화하고 있는지 자세히 설명하여 "작업자를 활성화"라는 응답을 시작했습니다. 즉, 많은 작은 PDF를 상당히 빠르게 표시하고 pdf_worker.js 용 1.2Mb 다운로드를 추가했습니다. 각 디스플레이는 실용적이지 않습니다.

@oddjobz 나는 여전히 우려를 이해하지 못합니다. 장애인 작업자를 사용하면 _still_ pdf.worker.js를 다운로드하지만 주 스레드에서 발생합니다. 웹 서버에서 올바르게 설정하면 정적 자바 스크립트 파일을 캐싱하고 추가 노력없이 각 요청에 대해 1.2Mb 다운로드를 피할 수 있습니다. PDFWorker는 단일 페이지에서 웹 작업자의 인스턴스를 캐싱하는 데 도움이됩니다 (예 : 여러 getDocuments 수행시).

이 문제가 솔루션에 대한 코드없이 완료되었는지 확실하지 않은 경우 기본적으로 PDF.js는 표준 브라우저 (기본 구성)가있는 표준 웹 서버에서 사용할 때 웹 작업자 코드를 캐시합니다.

글쎄요, 제가 사용하고있는 코드와 당신이 가지고있는 코드의 차이점은 모르겠지만 어딘가에 차이가 있습니다. 첫째, 작업자가 비활성화 된 상태에서 pdf_worker.js는 첫 번째 히트 "only"에서 한 번로드됩니다. 작업자를 활성화하면 모든 새 문서에 코드를로드하고 내가하는 일은 캐싱에 영향을주지 않는 것 같습니다. (즉, 캐시되지 않음) Chrome 개발자가 웹 작업자 및 캐시 된 코드에 문제가 있었기 때문에 캐시를 해제했다고 의심합니다. 내가 볼 수있는 한 모든 헤더는 캐싱을 위해 있어야하지만 캐싱이 발생하지 않습니다. (다른 것들은 _is_ 캐시 됨)

세 가지 관련 비트가 있습니다.
ㅏ. 스크립트 태그가있는 기본 코드 블록
비. 전역 변수를 설정하는 Onload
씨. DIV에서 PDF를 표시하는 독립형 클래스

메인 코드 블록;

<script type="text/javascript" src="js/compatibility.js"></script>
<script type="text/javascript" src="js/pdf.js"></script>

온로드 코드;

    PDFJS.disableWorker = true;
    PDFJS.verbosity = PDFJS.VERBOSITY_LEVELS.debug;
    PDFJS.workerSrc = "/js/pdf.worker.js";

클래스 정의;

JS.require('JS.Class',function(Class) {

    CLASS.PDFViewer = new Class({

        locked  : false,
        page        : 0,
        pages   : 0,
        pdf     : null,
        doc_id  : null,

        initialize: function(prefix) {
            this.canvas   = prefix+'-canvas';           // Canvas element ID we'll be rendering to
            this.prefix   = prefix;
            this.id_page  = '#'+this.canvas+'-page';    // Ident of page number
            this.id_pages = '#'+this.canvas+'-pages';   // Ident of page count
            this.setfocus(null);                        // Element to focus after render
        },
        reset:      function() { this.now_showing = null; console.log("PDF Reset")},
        set:        function(doc_id) { this.doc_id = doc_id; console.log("Docid:",doc_id) },
        load:       function() { this.fetch(this.doc_id); },
        set_doc:    function() {},
        setfocus: function(field_id) { this.focuson = field_id; },

        decode: function(base64) {
            var raw = atob(base64);
            var uint8Array = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) {
                uint8Array[i] = raw.charCodeAt(i);
                }
          return uint8Array;
        },

        full_screen: function() {
            if( $('#'+this.prefix+'-hide-me').is(':visible') ) {
                $('#'+this.prefix+'-hide-me').hide();
                $('#'+this.prefix+'-full-screen').removeClass("col-sm-7");
                $('#'+this.prefix+'-full-screen').addClass("col-sm-12");
            } else {
                $('#'+this.prefix+'-hide-me').show();
                $('#'+this.prefix+'-full-screen').removeClass("col-sm-12");
                $('#'+this.prefix+'-full-screen').addClass("col-sm-7");
            }
            this.turn_page();
        },
        focus: function() {
            if(this.focuson) {
                console.log("SetFocus>>",this.focuson);
                setTimeout("$('"+this.focuson+"').focus()",100);
                this.focuson = null;
            }
        },
        display: function(pdf) {
            this.pdf = pdf;
            $(this.id_pages).text(this.pdf.numPages);
            this.pages = this.pdf.numPages;
            this.page = 1;
            this.turn_page();
        },
        fetch: function(rid) {
            if(this.locked) return false;
            var self = this;
            var src = '/images/default.pdf';
            function success(data) {
                if(!LIB.check_error(data)) return false;
                if(data.pdf) src = self.decode(data.pdf);
                self.locked = true;
                PDFJS.getDocument(src).then(function(pdf){ self.display(pdf); });
                return true;
            }
            ionman.call('nac.rpc.pdf_spec',{'rid': rid},success)
            return true;
        },
        turn_page: function() {
        var self = this;
            self.pdf.getPage(self.page).then(function(page) {
                var canvas = document.getElementById(self.canvas);
        var ctx = canvas.getContext('2d');
        var unscaledViewport = page.getViewport(1.0);
                canvas.width = $('#'+self.canvas).width();
                var scale = canvas.width / unscaledViewport.width;
                var viewport = page.getViewport(scale);
                canvas.height = viewport.height;
            var renderContext = { canvasContext: ctx, viewport: viewport };
        page.render(renderContext).promise.then(function(){
                setTimeout(function(){
                    self.locked = false;
                        self.focus();
                    },250);
                });
                $(self.id_page).text(self.page);
            });
        },
        next: function() {
            if( this.page == this.pages) return;
            this.page += 1;
            this.turn_page();
        },
        prev: function() {
            if( this.page == 1) return;
            this.page -= 1;
            this.turn_page();
        }
    });

그래서 나는합니다.

var viewer = CLASS.PDFViewer('pdf');
viewer.fetch();

그리고 기본 문서는 ID가 "pdf-canvas"인 DIV입니다.

이것을 시도해 봅시다 :

1. Chrome에서 http://mozilla.github.io/pdf.js/web/viewer.html 을 엽니 다
2. 네트워크 페이지에서 devtools를 열고 분할 콘솔을 표시합니다 (이 탭에서 'esc'를 누름).
3. 예외가 발생하지 않았는지 확인하십시오 (예외 중단을 비활성화하고 그렇지 않으면 새로 고침).
4. "캐시 비활성화"가 꺼져 있는지 확인합니다 (그렇지 않으면 선택 취소하고 새로 고침).
5. 콘솔에서 PDFJS.getDocument('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
6. 두 번째 "pdf.worker.js"의 상태는 "200 OK (from cache)"입니다.

코드 조각은 도움이되지 않습니다. 어딘가에 작은 예제를 배포하십시오 (예 : github 페이지).

그래, 나는 그것을 본다 .. 이것은 내가 사용하는 것보다 PDF.js의 최신 버전 인 것 같습니다 .. 차이가 문제가 아니라고 가정하면 Varnish가 내 웹 서버에 대해 내놓은 헤더를 비교하여 캐싱이 아닌 이유를 알 수 있습니다.

저는 Chrome 개발자가 웹 작업자 및 캐시 된 코드에 문제가 있었기 때문에 캐싱을 해제했다고 의심합니다.

이 옵션과 disableWorker 옵션 사이에 연결이 표시되지 않습니다. pdf.worker.js는 참 또는 거짓 여부에 관계없이 요청됩니다. 따라서 문제는 캐싱과 관련이 없습니다.

간단하게 설명하기 위해 메시지가 disableWorker 모드에서 작동하는 방식과 연결되어 있다고 가정합니다 (실제로 테스트되지 않았으며 레거시 브라우저 및 디버깅 용이성을 지원하기 위해서만 생성됨). 문제가 눈에 보이는 최소한의 테스트 케이스를 갖도록 문제 범위를 좁히는 데 도움이됩니다 (온라인 액세스 가능).

좋아, 이것은 흥미로운 .. 더미 인증서 (여기서 호스트 이름! = localhost)에서 localhost : 8443 에 대해 테스트하는 것입니다. 캐시하지 않습니다. 유효한 상용 인증서를 사용하여 라이브 서버 포트 443에 대해 테스트 할 때 캐시 (!)를 수행합니다. 이제 웹 워커를 활성화하고 어떤 일이 발생하는지 살펴 보겠습니다. (하지만 어딘가에 여전히 문제가 있다고 생각합니다 ...)

제가 믿을 수 있을지 모르겠습니다 .. 그래서 스크린 샷을 추가했습니다 ...

캐시 비활성화는 확실히 _not_ 선택되었습니다 ...
(웹 서버 구성은 동일 함)

여기서 할 일이 더 있습니까? 내가 이해하는 바에 따르면 이것은 PDF.js의 버그처럼 들리지 않고 사용자 정의 구현에서 발생합니다.

이 (간헐적 인?) 실패를 재현 할 수있는 테스트 케이스가 있으면 좋을 것입니다.

버그입니다. 온라인 데모를 만들 겠지만 코딩과 시간이 조금 걸립니다.

안녕하세요, 같은 문제가 있습니다.

여기에 사용자 지정 내용이 없습니다. 방금 Github에서 리포지토리를 다운로드했습니다.

@ subhadip-codeclouds 같은 문제가 있다고 생각하지 않습니다. 별도의 문제를 열고 요청 된 세부 정보를 제공하십시오.

@ subhadip-codeclouds이 PDF는 어디에서 찾을 수 있습니까? 비슷한 문제가 발생하여 테스트 케이스로 사용하고 싶습니다.

Chrome과 Ubuntu에서 동일한 글꼴 렌더링 문제가 있다고 생각합니다 (다른 플랫폼을 테스트하지 않았습니다). 마스터의 최신 pdf.js를 사용하고 있으며 때로는 PDF가 @oddjobz 의 PDF처럼

나는 무엇이 잘못되었는지 또는 그것을 안정적으로 재현하는 방법을 정말로 모른다. 그러나 이것이 시나리오입니다. React를 사용하여 동적 단일 페이지 웹 사이트를 구축하고 있습니다. 사용자는 종종 탭을 클릭하면 iframe이 생성되고 iframe 내에 pdf.js가 표시됩니다. React와 내 웹 사이트가 작동하는 방식을 감안할 때 iframe이 생성되고 파괴됩니다. 시간이 좀 걸릴 수 있지만 결국에는 항상 글꼴 렌더링 손상이 발생합니다. 그리고 한 PDF에서 발생하면 다른 PDF에서도 무작위로 발생하기 시작합니다. 일부는 항상 괜찮고 일부는 그렇지 않습니다.

무슨 일이 일어나고 있는지 알아 내기 위해 켜거나 할 수있는 것이 있습니까 (예 : 디버그 플래그)? 콘솔에 오류나 경고가 표시되지 않습니다.

다음은 시작시 거의 항상 글꼴 렌더링 손상으로 끝나는 PDF입니다.
https://datalanche-sec-public.s3.amazonaws.com/filings/0001047469-15-008315/a2226328zex-31_2.htm.pdf

하나 더. 동일한 URL로 Chrome에서 새 탭을 열면 PDF가 수정됩니다. 그러나 동일한 탭에 머무르고 완전히 다른 웹 사이트로 이동 한 다음 뒤로 단추를 사용하지 않고 내 웹 사이트로 이동하면 글꼴이 손상된 PDF가 여전히 손상됩니다. 무슨 일이 일어나 든 탭의 메모리 및 / 또는 캐시가 손상되는 것 같습니다.

Chrome의 캐싱 문제 일 수 있습니다 (자세한 내용은 https://github.com/mozilla/pdf.js/issues/7751#issuecomment-256683285 참조).

이것에 대한 업데이트가 있습니까? 같은 문제가

때때로 (설명 할 수없는) 이걸 볼 수 있지만, 매우 드물고 실제로 충분히 드물지만 걱정을 멈췄습니다. 내가 가진 문제는 중복 작업이었습니다. 다른 작업이 아직 진행중인 동안 pdf 문서 (예 : 다음 페이지)에서 작업 할 수있는 것 같습니다. 이것이 문제를 일으키는 것 같습니다. 내 솔루션은 클래스의 모든 작업을 래핑 한 다음 시작 및 종료 지점에 마스터 잠금을 삽입하여 pdf 관련 작업이 충돌하지 않도록하는 것이 었습니다. 이것은 "나를 위해 수정 된 것 같습니다". 나는 pdf 항목이 별도의 스레드 또는 작업자 프로세스에서 실행되므로 충돌 가능성이 있다고 모호하게 가정하고 있습니다. 조금 전 이었지만 메모리에서 스레딩이 옵션이라고 생각하고 비활성화하여 솔루션을 발견했는데 성능에 부정적인 영향을 주었지만 문제는 해결되었습니다.

항상 나에게 발생하지만 테스트 케이스를 만들 수 없을 정도로 무작위입니다. 그러나 내 경우에도 스레딩으로 인한 메모리 손상 가능성이 있지만 Javascript가 단일 스레드라고 생각합니까?

Javascript가 단일 스레드라고 생각했습니다.

그것은. @oddjobz가 의미하는 바 (?)는 한 번에 둘 이상의 HTML5 캔버스에 칠할 때 Chrome에 버그가있을 수 있다는 의미이며 결함이 발생할 가능성이 높습니다. 그러나 재현 가능한 테스트 케이스가 없으면 추측하기 어렵고 Chromium 버그에 대한 의미있는 보고서를 작성합니다.

제 생각에 (메모리에서) "웹 작업자"라는 새로운 브라우저 기능을 사용하는 옵션을 사용한다고 생각합니다.이 기능을 사용하면 효과적으로 자바 스크립트 스레드를 만들 수 있습니다.이 기능을 끄고 "큰"PDF를 보려고하면 이 기능이 사용되는 "이유"를 참조하십시오 ... :)

"웹 작업자"라는 새로운 브라우저 기능을 사용하는 옵션을 사용합니다.
이 기능을 끄고 "큰"PDF를 보려고하면이 기능이 사용되는 "이유"가 표시됩니다.

OP는이 기능을 끄도록 지시합니다. 이는 Web Workers가 사용되지 않음을 의미하며, 이는 브라우저로 비난을 이동시키고 JavaScript "스레딩"과 관련이 없습니다.

약간 미묘하고 Javascript는 단일 스레드이지만 Chrome은 다중 스레드이며 웹 작업자를 사용하면 두 개의 Chrome 프로세스를 실행하고 둘 사이의 통신을 용이하게 할 수 있습니다. 마스터 만 DOM 액세스 권한을 얻는다고 생각하지만 UI 스레드를 차단하지 않고 프로세서 집약적 인 작업을 위해 하위 스레드를 사용할 수 있습니다. 특정 스레드 나 탭에 연결되지 않은 웹 워커를 만들 수 있다는 것을 알게되면 더 재미있어 지므로 페이지 새로 고침 후에도 효과적으로 살아남습니다 (즉, 지속적입니다). 나는 이것으로 인해 많은 문제가 발생하는 것을 봅니다 ...

물론입니다.하지만 내 의견은 스레딩없이 (즉, 내 스레드 수준 잠금을 구현하여)이 문제의 99 %가 사라진다는 것입니다. (나를 위해).

@oddjobz , @rpedela 하드웨어 / gpu 가속을 비활성화하고 문제가 계속 발생하는지 확인하십시오.

@yurydelendik , yup, 그것은 내가 시도한 첫 번째 일 중 하나였습니다. (차이 없음)

@yurydelendik , 내 응용 프로그램이 6 개월 이상 게시되었습니다. 남아있는 문제가 "다르고"가장 가능성이 높은 사용자 오류 또는 가끔 이상한 문서가되어 기쁩니다. 내가 가진 문제는 일관 적이지는 않지만 100 % 재현 가능했지만 사라졌습니다. 문서 작업 간의 중복으로 인해 (IMHO) 발생했습니다. 즉, 이전 작업이 완료되기 전에 시작된 프로세스-스레딩 여부, 이전 작업이 완료되기 전에 시작되는 작업을 방지하기 위해 수동 잠금을 설정합니다. 쉽게 재현 된 예는 문서를 빠르게 앞으로 스캔하고 이전 페이지가 렌더링을 완전히 완료하기 전에 "다음"처리를 시작하는 것입니다.

자바 스크립트는 단일 스레드이지만 Chrome은 다중 스레드이며 웹 작업자를 사용하면 두 개의 Chrome 프로세스를 실행할 수 있고 둘 사이의 통신을 용이하게 할 수 있습니다. 마스터 만 DOM 액세스 권한을 얻는다고 생각하지만 UI 스레드를 차단하지 않고 프로세서 집약적 인 작업을 위해 하위 스레드를 사용할 수 있습니다.

"웹 작업자"라는 용어가 포함 된이 문장은 혼란 스럽습니다. 위의 진술을 확인하기 위해 참조를 제공 할 수 있습니까? 웹 워커는 설계 상 DOM에 액세스 할 수 없으며 PDF.js는 메인 스레드에서 페인팅을 수행합니다. Chrome의 렌더링 프로세스를 의미합니까? DOM을 업데이트하는 유일한 방법은 웹 워커가 아닌 메인 스레드에서 오는 것입니다.

이전 작업이 완료되기 전에 시작된 작업-스레딩 여부, 이전 작업이 완료되기 전에 시작되는 작업을 방지하기 위해 수동 잠금을 설정합니다.

이 컨텍스트에서 "작업"이란 정확히 무엇을 의미합니까? API의 render() 호출의 수명입니까?

@oddjobz 방금 스레드를 다시 읽었으며 서로 다른 기간에 충돌하는 진술이 많이 있습니다. 또한 구성 섹션도 충돌합니다. 예를 들어 Mac OSX의 모든 브라우저에서 로컬로 복제 할 수 없습니다. 표준 뷰어 (사용자 지정 뷰어가 아님)로 재현 할 수 있는지 여전히 잘 모르겠습니다. 다른 스레드 참가자를 혼동하지 않도록이 버그를 유효하지 않거나 불완전한 것으로 종료하겠습니다.

@oddjobz , @rpedela , @badams , @pholisma , @ subhadip-codeclouds 문제가 발생한 정확한 구성과 문제를 재현 할 수있는 정확한 단계 (PDF 포함)가 포함 된 별도의 버그 보고서를 제공 할 수 있습니까? 맞춤 솔루션 인 경우 공개 링크를 제공합니다.

좋습니다. 이것은 문제의 코드입니다. 수정 된 부분을 볼 수 있습니다.

특히 잠금을위한 루틴이 있습니다.

this.locked = true;
PDFJS.getDocument(path+doc_id).then(function(pdf) {
    $('#pdf-canvas-pages').text(pdf.numPages);
    self.pages = pdf.numPages;
    self.page = 1;
    self.pdf = pdf;
    pdf.getPage(1).then(function(page) { self.turnpage(); });
})

turnpage: function() {
    var self = this;
    self.pdf.getPage(self.page).then(function(page) {
        var canvas = document.getElementById('pdf-canvas');
        var ctx = canvas.getContext('2d');
        var unscaledViewport = page.getViewport(1);
        canvas.width = $('#pdf-canvas').width();
        var scale = canvas.width / unscaledViewport.width;
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        var renderContext = { canvasContext: ctx, viewport: viewport };
        page.render(renderContext);
        $('#pdf-canvas-page').text(self.page);
        self.locked = false;
    });
},

예, 이것이 제가 그 시점에 요점을 밀지 않은 이유입니다. 문제가 해결되어야한다는 것은 말할 것도없고 문제가 있다는 것을 받아들이는 것조차 주저하는 것 같습니다.

위의 스 니펫 문제는 https://github.com/mozilla/pdf.js/pull/6571 에서 해결되었습니다.

음, 제가 말할 수있는 것은 2016 년 중반 최신 버전을 사용하고 있었지만 여전히 문제가있었습니다. 나는 그것이 고쳐 졌다고 (반복적으로) 말했던 것을 기억하는 것 같습니다. (그리고 다른 많은 사람들과 마찬가지로 분명히 그렇지 않다는 것을 알 수있었습니다)

어쨌든, 같은 문제를 보는 사람이라면 위와 같이 자물쇠를 꽂아서 차이가 나는지 확인하십시오. .. 두 줄뿐입니다 ...

@yurydelendik 이것은 사용자 (주로 Windows 7을 사용)에게 꽤 일관되게 발생하고 있지만 OSX에서 최신 버전으로 재현 할 수 있었지만 100 % 일관되게 재현 할 수는 없었습니다.

우리는 사용자 정의 코드를 사용하지 않고 단순히 다음을 수행합니다.

<iframe
    style="height: 650px; width: 600px"
    src="/path/to/pdfjs/web/viewer.html?file=/path/to/file.pdf"
/>

문서에 다른 굵은 텍스트가 있는지 여부, 초기 확대 / 축소 수준 (확대 및 축소하면 문제가 해결되는 경우가 있음)과 같은 여러 요인에 따라 달라지는 것 같습니다. 또한 이것은 미리보기에만 영향을 미치는 것으로 나타났습니다. 그리고 인쇄하면 pdf를 다운로드하면 완벽하게 렌더링되는 것처럼 보입니다 (pdf.js가 제공된 파일을 사용자에게 전달하기 때문입니다).

우리는이 솔루션을 사용하지 않고 파일을 사용자 컴퓨터에 직접 다운로드하기로 결정했지만 어제 하루 종일이 버그를 쫓는 데 이미 시간을 보냈지 만 재현 가능한 테스트 케이스를 생각해 내기 위해 시간을 할애 할 것입니다.

@badams , 다음 / 이전 페이지와 마찬가지로 확대 / 축소도 나에게 수정 사항임을 확인할 수 있습니다. 나는 또한 대담함이 문제의 가능성을 높이는 인상을 받았다.

나는 재현 가능한 테스트 케이스를 생각해 내기 위해 시간을 할애 할 것이다.

@badams 감사합니다. 기고자가 컴퓨터에서 문제를 재현하려고 할 때 모든 변형을 취하는 모든 것이 작동하고 온라인으로 게시 된 전체 예제가 가장 좋습니다 (github repo의 gh-pages 브랜치에서 전체 예제를 게시 할 수 있음).

안녕하세요 여러분,

이 모든 이야기를 제대로 이해하지 못했습니다.
이미 수정이 있습니까? 아니면 어떤 종류의 구현을해야합니까?

문안 인사,
타르 시시오 페레이라

이 모든 이야기를 제대로 이해하지 못했습니다.

아무도 그렇게 생각하지 않습니다.

이 스레드는 문제를 재현하기위한 정확한 단계를 제공하지 않기 때문에 (및 의견에 잘못된 권장 사항이 있기 때문에) 닫혔습니다. 문제가 100 % 재현 될 것으로 기대하지는 않지만, 10 번에 한 번 이상 나타나게하는 것이 좋습니다.

PDF.js가 이러한 방식으로 수행되거나 코드에 버그가있을 수있는 가능한 항목 :

• HTTP 서버 또는 브라우저가 HTTP 범위 요청을 제대로 처리하지 못함
• 브라우저가 글꼴로드 또는 캔버스 작업을 제대로 처리하지 않습니다.
• 사용자 지정 솔루션이 위의 작업과 충돌합니다.

FWIW pdf.js (v1.7.376) 배포와 함께 드물게 이러한 손상이 발생했습니다. 범위 요청 처리가 올바른 것 같습니다. 신뢰할 수있는 재현 단계를 찾을 수 있으면보고하겠습니다 ...

이 문제는 Chrome에서만 발생했으며 확대 / 축소를 변경하면 사라집니다. 그래서 우리는 showPreviousViewOnLoad 를 false 했고 다시는이 문제가 발생하지 않았습니다.

@TZanke showPreviousViewOnLoad 제거하면 확대 / 축소가 변경되는 이유를 명확히 할 수 있습니까? 감사!

@tonyjin pdf.js autozoom은 확대 / 축소 값을 계산하여 로컬 저장소에 저장합니다. 페이지를 다시로드 한 후에는 자동 확대 / 축소가 사용되지 않고 대신 이전에 계산 된 확대 / 축소 값이 사용됩니다. 이 값을 다시로드하는 데 문제가있는 것 같습니다.

따라서 showPreviousViewOnLoad 비활성화하면 자동 확대 기능이 매번 시작되고 페이지가 올바르게 확대되며 렌더링 문제가 발생하지 않습니다.

@TZanke- 귀하의 접근 방식을 시도했지만 안타깝게도 문제가 가끔 발생합니다 .. :(