HTML Canvas 打印预览答案

【问题标题】：HTML Canvas print previewHTML Canvas 打印预览
【发布时间】：2022-09-28 23:31:29
【问题描述】：

我正在尝试打印画布内容。我在打印按钮上有以下 javascript 代码单击以获取打印预览。

     function openPrintDialog(isLandscape, paperSize) {
            /*jshint multistr: true */
            var style = \'<style context=\"program\"> \\
            @media print { \\
                * { \\
                    display: block; \\
                } \\
\\
                html, body, .hidden-print-image, *{ \\
                    display: block; \\
                    text-align: center; \\
                } \\
\\
                img { \\
                    \' + (isLandscape ? \'max-width: \' + paperSize.heightMm + \';\' : \'max-width: \' + paperSize.widthMm + \';\') + \'\\
                    \' + (isLandscape ? \'max-height:\' + paperSize.widthMm + \';\' : \'max-height: \' + paperSize.heightMm + \';\') + \'\\
                } \\
            } \\
            </style>\';

            $(\'head\').append(style);            
            window.print();

            $timeout(function() {
                $(\'[context=program]\').remove();

                $(\'.hidden-print-image\').remove();
            }, 2000);
        }

这是我的画布内容，包括页面内容。

我只想导出和打印图像。不想显示或打印页面内容。

目前，我在打印预览中看到了所有元素。如何排除除图像之外的所有元素？

不应该为 * 的 css 规则 display: none 吗？然后将您感兴趣的单个元素显示为块？
@enhzflep 我尝试将 * 设置为 display:none 然后它根本不显示任何内容。只是显示一个空白屏幕。我的问题是，如何在画布上找到正确的元素标签来设置显示属性？我尝试设置 img { display: block; } 但没有运气

标签： html html5-canvas

【解决方案1】：

打印JS（{ 可打印：['images/print-01-highres.jpg']，类型：'图像'， imageStyle: '宽度：50%;margin-bottom:20px;' });

来自这个图书馆：https://printjs.crabbly.com/ 它基本上有你要求的这个功能

【讨论】：