从 Chrome 打印/保存到 pdf 时，有没有办法将您的 div 内容强制适合单个纸张（字母）？

Posted 2023-05-08

【中文标题】从 Chrome 打印/保存到 pdf 时，有没有办法将您的 div 内容强制适合单个纸张（字母）？

【英文标题】：Is there a way to force-fit your div content to a single paper (letter) when printing/saving to pdf from Chrome?

【发布时间】：2019-02-09 06:13:00

【问题描述】：

每当我想打印/保存到 pdf 所述视图时，我都会尝试将视图适合单个页面。该视图包括一个动态表，其中的内容是不可预测的。我的问题是，每当表格太长时，视图的后半部分就会被剪切并在下一页继续。我只是通过缩放我的 CSS 来调整视图以进行打印。我的缩放当前设置为 66%，并且很难找到最佳位置，因为表格行数是不可预测的。这是根本不可能的事情吗？

附上截图供参考：

【问题讨论】：

我认为缩放只适用于 IE

它也适用于 Chrome。显示比没有缩放时更大。

【参考方案1】：

一个甜蜜的地方，也许不是。

表格在打​​印中可能会非常讨厌。

假设每个表都在一个表容器内，具有有限的排序大小。

样式：

<style type='text/css'>
    .table-container 
        width: 700px;
        overflow: scroll;
    

    table 
        width: 100;
    
</style>

html：

<div class="table-container">
    <table>
    ...
    </table>
</div>

脚本：

首先在我们的脚本顶部添加一个 JQuery 扩展：

jQuery.fn.hasHScrollBar = function () 
   return this.get(0).scrollWidth > this.innerWidth();

然后循环直到我们达到完全不可读的最小字体大小或滚动条消失，以先到者为准。

$(document).ready(function () 
    $('.table-container').each(function() 
        var font_size = 24;
        var min_font_size = 5;
        while ($(this).hasHScrollBar()) 
            if (font_size < min_font_size)
                return false;
            $('table').css("font-size", font_size + "px");
            font_size--;
        
        $(this).css("overflow", "hidden");
    );
);

或者作为一个按钮：

$("#print-button").click(function () 
    $('.table-container').each(function() 
        var font_size = 24;
        var min_font_size = 5;
        while ($(this).hasHScrollBar()) 
            if (font_size < min_font_size)
                return false;
            $('table').css("font-size", font_size + "px");
            font_size--;
        
        $(this).css("overflow", "hidden");
    );
    window.print();
);

-- 更新--

或使用缩放的整个事情：

body 
    width: 700px;
    overflow: scroll;


.page 
    width: 100%;

假设您有一个名为 Page 的***元素来包装整个内容。由于缩放将自身固定在元素的中心，因此需要进行一些额外的调整，例如设置左边距。它适用于最新版本的 Chrome、Opera、IE 和 Firefox。

$("body").each(function () 
    var innerPage = $(this).find(".page");
    var BaseWidth = parseInt($(innerPage).css("width"));
    var CalcWidth = BaseWidth;
    var scale = 1.0;
    var min_scale = 0.2;
    while ($(this).hasHScrollBar()) 
        if (scale < min_scale)
            break;
        CalcWidth = parseInt(BaseWidth * scale);
        $(innerPage).css("transform", "scale(" + scale + ")");
        $(innerPage).css('margin-left', (-1 * ((BaseWidth - CalcWidth)/2)));
        scale -= 0.1;
    
    $(this).css("overflow", "hidden");
);

【讨论】：

真的应该准备好文件吗？如果我只想在用户单击打印按钮时应用它怎么办？

从头开始，我能够让它工作，但它仍然不适合，因为它只是调整表格的字体大小。有没有办法缩放整个 div？

是什么让它太大了？