如何使用 html2canvas 打印网页

How to use html2canvas to print web page?

本文关键字：网页 打印 html2canvas 何使用      更新时间：2023-09-26

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

请参阅下面的我的实现。

我有 2 个问题：

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

（编辑：修复了这个问题：2.我不希望渲染中显示带有"#hidden 打印"的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();
            }
        });
    });

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

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