如何使用html2canvas打印网页？

Question

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

查看下面我的实现。

我有两个问题：

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

（编辑：修复了这个问题：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

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

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

如何使用html2canvas打印网页？

How to use html2canvas to print web page?

html

javascript

jquery

html2canvas