如何用js调整pdf的大小答案

【问题标题】：how can i resize a pdf with js如何用js调整pdf的大小
【发布时间】：2020-11-05 14:25:43
【问题描述】：

我正在研究响应式设计，我希望 pdf 的比例根据屏幕的大小而变化，我该如何更改它，因为使用当前代码，pdf 具有固定的宽度

if (pageNumber >= 1 && pageNumber <= doc._pdfInfo.numPages) {

    // Fetch the page
    const page = await doc.getPage(pageNumber);

    // Set the viewport
    const viewport = page.getViewport({ scale: 1 });

    // Set the canvas dimensions to the PDF page dimensions
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render the PDF page into the canvas context
    return await page.render({
        canvasContext: context,
        viewport: viewport
    }).promise;

} else {
    console.log("Please specify a valid page number");
}

【问题讨论】：

你能提供更多细节和代码吗？
当然，我不明白的是如何更改 const viewport = page.getViewport ({scale: 1});因为这个比例对我来说很好，直到我达到 622px 的屏幕尺寸，我想要的是在小于 622px 的屏幕尺寸中比例下降到 0.75
您可以检查 window.innerWidth 来检测宽度。如果小于 662px，则设置比例为 0.75，否则设置比例为 1。
我怎样才能把这个条件写成代码形式，对不起，我是编程新手

标签： javascript html css pdf

【解决方案1】：

我已经更新了代码。

if (pageNumber >= 1 && pageNumber <= doc._pdfInfo.numPages) {
    
        // Fetch the page
        const page = await doc.getPage(pageNumber);
    
        // Set the viewport
         let scale;
        if(window.innerWidth < 662px) {
           scale = 0.75
        } else {
           scale = 1
        }
        const viewport = page.getViewport({ scale });
    
        // Set the canvas dimensions to the PDF page dimensions
        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;
    
        // Render the PDF page into the canvas context
        return await page.render({
            canvasContext: context,
            viewport: viewport
        }).promise;
    
    } else {
        console.log("Please specify a valid page number");
    }

【讨论】：