Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.5
Detailed description of issue
When loading a linearlized PDFs with loadDocument method, the viewer doesn’t show the pdf immediately but wait for the whole file to be fully loaded.
Viewer still in loading state after 206 requests are completed
Expected behaviour
The viewer show the file immediately if it is linearlized and the server support byte range requests.
Does your issue happen with every document, or just one?
Every documents.
Link to document
{Provide a link to the document in question if possible}
Code snippet
My webviewer
document.addEventListener('DOMContentLoaded', function() {
WebViewer({
path: url + 'assets/pdfjs-express/lib/',
licenseKey: 'licensekey',
disabledElements: ['printButton', 'downloadButton']
}, document.getElementById('express-viewer'))
.then(instance => {
const { documentViewer } = instance.Core;
instance.disableFeatures([instance.Feature.TextSelection]);
instance.UI.disableFeatures([instance.UI.Feature.Print]);
instance.UI.disableFeatures([instance.UI.Feature.Download]);
instance.setLanguage('vi');
instance.setLayoutMode(instance.LayoutMode.Single);
instance.setCustomPanel(customPanel);
instance.openElements(['leftPanel']);
instance.setActiveLeftPanel('customPanel');
instance.loadDocument(url + 'getfile/' + document.getElementById('book-id').value, {
extension: 'pdf',
documentId: document.getElementById('book-id').value
});
});
});
My PHP server:
$fileSize = filesize($pdfPath);
$this->response->setHeader('Accept-Ranges', 'bytes');
$rangeHeader = $this->request->getHeaderLine('Range');
if ($rangeHeader) {
if (preg_match('/bytes=(\d*)-(\d*)/', $rangeHeader, $matches)) {
$start = $matches[1];
$end = $matches[2];
if ($start === '') {
$start = $fileSize - $end;
$end = $fileSize - 1;
} elseif ($end === '') {
$end = $fileSize - 1;
}
$start = (int)$start;
$end = (int)$end;
if ($start >= $fileSize || $end < $start) {
return $this->response->setStatusCode(416)->setBody('Range Not Satisfiable');
}
$length = $end - $start + 1;
$file = fopen($pdfPath, 'rb');
fseek($file, $start);
$buffer = fread($file, $length);
fclose($file);
$this->response->setStatusCode(206);
$this->response->setHeader('Content-Range', "bytes {$start}-{$end}/{$fileSize}");
$this->response->setHeader('Content-Length', $length);
return $this->response->setHeader('Content-Type', 'application/octet-stream')->setBody($buffer);
} else {
return $this->response->setStatusCode(400)->setBody('Invalid Range header.');
}
} else { //Send the whole file
$rangeStart = $fileSize - 1;
$this->response->setHeader('Content-Range', "bytes 0-{$rangeStart}/{$fileSize}");
$this->response->setHeader('Content-Length', $fileSize);
return $this->response->setHeader('Content-Type', 'application/pdf')->setBody(file_get_contents($pdfPath));
}
