当我调整窗口大小时，我试图更新我的pdf预览。现在我的画布的大小正在改变，但pdf预览是保持相同的大小。我找不到一个方法来做这件事。
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>当我调整窗口大小时，我试图删除画布，并将其添加回另一个大小。画布的大小正在改变，但是里面的pdf预览不适合它。
阅读:这个解决方案
我设法解决了这个问题，视窗是答案。问题是getViewport的名称(它也可以是setter):
var viewport = page.getViewport
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
function domLoad() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.createElement('canvas');
canvas.id = 'pdf_renderer';
var ctx = canvas.getContext('2d');
console.log(page);
var heightRatio = 842 / 595;
canvas.width = ((((595/941.39)*100)*window.innerWidth)/100);
canvas.height = ((((595/941.39)*100)*window.innerWidth)/100) * heightRatio;
var viewport = page.getViewport(canvas.width / page.getViewport(myState.zoom).width);
page.render({
canvasContext: ctx,
viewport: viewport
});
updateCanvas(canvas);
});
}
document.addEventListener('DOMContentLoaded', function(event) {
pdfjsLib.getDocument('../documents/cv.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);
}