Question

我想为商店张贴一个页面，其中包含人们可以打印并带到商店的优惠券。我正在寻找一种方法让他们只打印优惠券，而不是整页。

我想也许如果我将优惠券图片放入iFrame中，那里的印刷品可能只是打印图像，但我想先看看是否有更好的，已建立的方法来做到这一点。

感谢任何想法。

Answer 1

使用print.css文件，您可以隐藏其他网站元素（通过CSS显示：无;），以便在打开优惠券的页面上，打印时仅显示优惠券。

Answer 2

在你的css中：

@media print {

    .elementsToHide { 
        display:none; 
    }

    #coupon {
        display:block; 
    }
}

Answer 3

这个答案可能会迟到，但如果您希望用户只打印图片，那么我认为最好的方法是：

在新窗口/标签页中打开一个新页面，其中只包含图片（仅<img>标记中的<body>标记）。这样，用户可以从菜单中选择打印并只打印图片。

通过这种方式，用户可以清楚地看到打印的内容。

此外，您可以弹出一个window.print的打印对话框，该对话框不符合规格，但无论如何都适用于所有桌面浏览器。

一些澄清：

我了解打印样式，并且您可以使用它们完全重新排序页面，但我发现用户实际上希望在显示器上看到相同的布局。通过制作和显示仅用于打印的新页面，用户可以“预览”将要打印的内容，因此他将更有信心进行打印。