9

私は pdf.js を使用して、次のボタン、前のボタン、およびその他の機能を備えた 2 ページを並べた単純な pdf ビューアを作成しました。viewer.js ファイルは私のような初心者には複雑すぎるため、pdf.js リポジトリで利用可能な helloworld の例を使用しました。ただし、前/次のボタンを数回クリックすると、pdf.js は予想される最後のページではなくすべてのページをレンダリングします。それは混乱を引き起こします。次の pdf.js による例にも同じ問題があります。 http://jsbin.com/pdfjs-prevnext-v2/1/edit (リンクは Firefox でのみ機能するようです。)

次/前のボタンで到達した最後のページのみをpdf.jsにレンダリングさせる方法を知りたいです。pdf.js api はあまり役に立ちませんでした。ここで何らかのガイダンスが得られることを願っています。前もって感謝します。

4

3 に答える 3

4

あなたの問題をよく理解していれば、解決策があるかもしれません。前または次のボタンをクリックする速度が速すぎると、キャンバスを更新する時間がなく、2 つ (またはそれ以上) のページが描画され、判読できませんでした。

この問題を解決するために、次のコードを使用します。

var stop = false;
function goPrevious() {
    if (pageNum > 1 && !stop)
    {
        stop = true;
        pageNum--;
        renderPage(pageNum);
    }
}

function goNext() {
    if (pageNum < pdfDoc.numPages && !stop)
    {
        stop = true;
        pageNum++;
        renderPage(pageNum);
    }
}

pdf.js ファイルの render 関数も変更しました。

 render: function PDFPageProxy_render(params) {
      this.renderInProgress = true;

      var promise = new Promise();
      var stats = this.stats;
      stats.time('Overall');
      // If there is no displayReadyPromise yet, then the operatorList was never
      // requested before. Make the request and create the promise.
      if (!this.displayReadyPromise) {
        this.displayReadyPromise = new Promise();
        this.destroyed = false;

        this.stats.time('Page Request');
        this.transport.messageHandler.send('RenderPageRequest', {
          pageIndex: this.pageNumber - 1
        });
      }

      var self = this;
      function complete(error) {
        self.renderInProgress = false;
        stop = false;
        if (self.destroyed || self.cleanupAfterRender) {
          delete self.displayReadyPromise;
          delete self.operatorList;
          self.objs.clear();
        }

        if (error)
          promise.reject(error);
        else
          promise.resolve();
      }
      var continueCallback = params.continueCallback;
//etc.

（私のpdf.jsファイルでは、これは2563行目と2596行目の間です）。

その結果、前/次のボタンを非常に速くクリックしても、前のページが完全に描画されるまで、新しいページは描画されません!

他の解決策は、前の描画をキャンセルすることです:

function renderPage(num) {


pdfDoc.getPage(num).then(function(page) {

        // canvas resize
        viewport = page.getViewport(ratio);
        canvas.height = viewport.height;
        canvas.width = viewport.width;


        // draw the page into the canvas
        var pageTimestamp = new Date().getTime();
        timestamp = pageTimestamp;
        var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                continueCallback: function(cont) {
                    if(timestamp != pageTimestamp) {
                        return;
                    }
                    cont();
                }
        };
        page.render(renderContext);


        // update page numbers
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    });
}

お役に立てば幸いです。私の英語で申し訳ありません ;) よい一日を

于 2013-08-06T13:37:56.217 に答える
0

timestamp2 番目の解決策については、たとえばファイルの先頭など、関数の外側に変数を作成する必要があります。関数内で宣言するtimestampと、変数は関数の実行中にのみ存在し、機能しません。次のことができます。

var timestamp;
function renderPage(num) {


pdfDoc.getPage(num).then(function(page) {

        // canvas resize
        viewport = page.getViewport(ratio);
        canvas.height = viewport.height;
        canvas.width = viewport.width;


        // draw the page into the canvas
        var pageTimestamp = new Date().getTime();
        timestamp = pageTimestamp;
        var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                continueCallback: function(cont) {
                    if(timestamp != pageTimestamp) {
                        return;
                    }
                    cont();
                }
        };
        page.render(renderContext);


        // update page numbers
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    });
}

今大丈夫か教えて

于 2013-08-07T08:05:55.503 に答える