Pdf.js: Multipage pdfs do not render

[GiacomoLaw]

Link to PDF file (or attach file here): https://www.crc.id.au/xplane/charts/DAPS-2015-NOV-12/Canberra%20(YSCB).pdf

Configuration:

• Web browser and its version: any
• Operating system and its version: any
• PDF.js version: latest
• Is an extension:

Steps to reproduce the problem:

1. Insert pdf into html
2. Load html (you can see on ifcharts.ml/YSCB.html

What is the expected behavior? (add screenshot)
The pdf would load all pages

What went wrong? (add screenshot)
Only the first page was viewed

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):
ifcharts.ml/YSCB.html

[timvandermeij]

44 pages are rendered for me with no warnings in the console. Works for me using Arch Linux, Firefox 48.0.2 and the latest PDF.js development version. Did you try downloading the file and opening it with https://mozilla.github.io/pdf.js/web/viewer.html (Open File button in the toolbar)?

[yurydelendik]

Custom viewer is used to display SVG. (FWIW SVG rendering is not supported yet) Also looks like the custom viewer displays only first page, so it's not an issue.

It is hard to address the issue unless minimal example will be published that shows defect with PDF.js. The steps to reproduce are not clear as well.

[GiacomoLaw]

@timvandermeij It doesn't seem to show the other pages here: http://ifcharts.ml/YSCB.html

[timvandermeij]

I see this in the page's source code:

function getMyPDF(svgPlace,url)
{
// URL of PDF document
//var url = "EG_AD_2_EGLC_2-1_en_2016-03-03.pdf";

// Asynchronous download PDF
PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {

// Set scale (zoom) level
var scale = 1.5;

// Get viewport (dimensions)
var viewport = page.getViewport(scale);

// Get div#the-svg
var container = document.getElementById(svgPlace);

// Set dimensions
container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px';

// SVG rendering by PDF.js
page.getOperatorList()
  .then(function (opList) {
    var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
    return svgGfx.getSVG(opList, viewport);
  })
  .then(function (svg) {
    container.appendChild(svg);
  });

});
}

You're actually only rendering the first page with pdf.getPage(1), so it's expected that only one page is rendered.

Closing as this is not an issue in PDF.js, but rather in the custom implementation.

[GiacomoLaw]

@timvandermeij That's not the page with the issue. The page is ifcharts.ml/YSCB.html. I can't seem to make it show all pages. Sorry about the issue.

[timvandermeij]

You need to do what the svg-viewer example at https://github.com/mozilla/pdf.js/blob/master/examples/svgviewer/viewer.js does. Get the number of pages numPages and create a for loop to render them all.

[GiacomoLaw]

@timvandermeij So I just change this: https://gyazo.com/ab3164781702b43f6320acbdbe9fa785 to numPages?

[timvandermeij]

No, the getPage method only returns _one_ page, so you need to create a for loop yourself if you want all of them. Use the SVG example code posted above as a reference for this, as it does exactly that.

[GiacomoLaw]

@timvandermeij okay, thanks for the help.