Question

我想让我的页面打印完全像屏幕上显示的那样，并找到一个名为html2canvas的脚本：http://html2canvas.hertzen.com/documentation.html

请参阅下面的实施。

我有两个问题：

当我点击打印按钮时，Chrome会显示打印对话框，但页面会显示2次 - 首先是常规打印版本，然后是html2canvas渲染。显然我不需要常规打印......我试图隐藏“身体”，但这没有帮助。

（编辑：修正了这个：2。我不希望在渲染上显示带有“＃hidden-print”的div。但即使我隐藏了它，如我的代码中所示，它仍会显示出来。任何人都知道如何确保渲染中没有显示？）

    $('#print').on('click', function(){

        html2canvas(document.body, {
            onrendered: function(canvas) {
                $('#hidden-print').hide();
                document.body.appendChild(canvas);
                window.print();
                $('canvas').remove();
                $('#hidden-print').show();
            }
        });
    });

Answer 1

在附加画布和打印之间，添加样式规则以隐藏除画布之外的所有后体，而不是主体元素本身。显然不要忘记事后将其删除。

var hide = $('<style>').html('body *:not(canvas) { display: none !important; }').appendTo(document.head);
... // print
hide.remove();

如何使用html2canvas打印网页？

1 个答案: