Let's see, I can not show it in a snippet, because PDF.js makes a POST request to bring the PDF and these snippets do not allow it. But I left you an example in
link
Basically, you create a canvas with the desired width:
<body>
<div id="pdf-main-container">
<a id="download-image" href="#">Download PNG</a>
<canvas id="pdf-canvas" width="800"></canvas>
</div>
</body>
There I put it 800px wide.
That canvas then exports the image when the download link receives the canvas.toDataUrl()
output and the download
attribute that tells the browser to download the link instead of following it:
$("#download-image").on('click', function() {
$(this).attr('href', __CANVAS.toDataURL()).attr('download', 'page.png');
});
The important thing is that the original dimension of the PDF is resized to the size of the canvas container. If the container is too small, quality will be lost.
All the above can also be done with a PDF of several pages
link
Only the pager is loading one page at a time. If you wanted to export the entire document, you would have to modify the script and possibly alter the height of the canvas.