当浏览器缩放更改或/和屏幕分辨率更改时,使用JPSDF产生的页边距问题

问题描述

我有一个html页,其中包含表格中的许多文本。单击“生成pdf”按钮时,我正在使用 jspdf 1.5版及更高版本和 html2canvas 库来创建pdf。

pdf正确生成。 但是,当浏览器缩放更改或屏幕分辨率不同时,PDF中就会出现页边距问题。

我将此代码与addimage()方法一起使用:

<head> 
        <Meta charset="utf-8"> 
        <title>Template 01</title>      
        <link id="BootstrapCSS" rel="stylesheet" type="text/css" href="bootstrap.min.css">      

</head>

<body id="toPDF">

        <div id="result">
            <div id="target">
                <div class="container-fluid">           
                    <p id="generateButton" style="display: none;"><button type="button" class="btn btn-primary btn-lg" onclick="download()">Generate PDF</button></p>
                    <div id="content">
                        <table id="table01" class="table table-bordered table_border">                      
                            ...
                        </table>
                        <table id="table02" class="table table-bordered table_border">                      
                            ...
                        </table>
                        
                        ...
                    </div>
                </div>
            </div>
        </div>

</body>

<script src="jspdf.debug.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="html2canvas.min.js"></script>
<script>
    function download() {
        
        html2canvas(document.getElementById('content'),{ scale: 1,width: 2000,height: 9000 }).then(canvas => {
            var imgData = canvas.toDataURL("image/jpeg");
            var pdf = new jsPDF('p','mm',[520,1080]);
            pdf.addImage(imgData,'JPEG',10,10);
            
            pdf.save(fileName);
        }); 
        
    }
</script>

如果我更改了参数(高度,宽度和比例)的值,则在特定情况下(例如,在屏幕分辨率为1366 * 768的浏览器中放大到75%)可以解决问题

我不知道如何解决缩放问题,具体取决于缩放浏览器和屏幕分辨率。

您能帮我吗?

预先感谢您的帮助

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)