如何使用 html2canvas 打印网页？答案

【问题标题】：How to use html2canvas to print web page?如何使用 html2canvas 打印网页？
【发布时间】：2015-03-12 22:58:36
【问题描述】：

我想让我的页面与屏幕上显示的完全一样，并找到了一个名为 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();
            }
        });
    });

【问题讨论】：

渲染后隐藏，但这不会改变渲染的内容。在调用 html2canvas() 之前隐藏它们
糟糕，我指的是 ID 而不是类！我把 $('.hidden-print').hide();在调用 html2canvas 之前，解决了第 2 个问题！

标签： javascript jquery html html2canvas

【解决方案1】：

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

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

【讨论】：