How can I update my PDF preview when resizing the window? Currently, the canvas resizes but the PDF preview remains the same size. I am struggling to find a solution for this.
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
function domLoad() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
var heightRatio = 842 / 595;
canvas.width = ((((595/941.39)*100)*window.innerWidth)/100);
canvas.height = ((((595/941.39)*100)*window.innerWidth)/100) * heightRatio;
page.render({
canvasContext: ctx,
viewport: viewport
});
updateCanvas(canvas);
});
}
document.addEventListener('DOMContentLoaded', function(event) {
pdfjsLib.getDocument('https://www.ecam.fr/wp-content/uploads/sites/3/2016/06/Exemple-fichier-PDF-1.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
function render() {
domLoad();
}
})
addEventListener("resize", (event) => {
domLoad();
});
function updateCanvas(canvas) {
var canvasParent = document.getElementById("pdf_container");
var previousCanvas = canvasParent.querySelector('canvas');
if(previousCanvas !== null) {
canvasParent.removeChild(previousCanvas);
}
canvasParent.appendChild(canvas);
}body { width: 100%; height: 100%; }<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>
<body>
<a id="pdf_container" class="pdf_container" href="https://www.ecam.fr/wp-content/uploads/sites/3/2016/06/Exemple-fichier-PDF-1.pdf">
</a>
</div>
</body>I have attempted to resize the canvas and update it during window resizing by removing and re-adding it with a new size. However, the PDF preview inside does not adjust accordingly.