web-applications - 如何打印图像？

Question

我想为商店设置一个页面，上面有人们可以打印并带到商店的优惠券。我正在寻找一种方法让他们只打印优惠券，而不是整个页面。

我在想，如果我将优惠券图像放入 iFrame 中，从那里打印出来的图像可能只是打印图像，但我想先看看是否已经有更好的、既定的方法来做到这一点。

感谢您的任何想法。

score 0 · Accepted Answer

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

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

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

您还可以使用window.print弹出一个打印对话框，该对话框不在规范中，但无论如何都可以在所有桌面浏览器中使用。

一些澄清：

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

score 0 · Accepted Answer

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

这是一篇关于 print.css 的好文章：http: //alistapart.com/article/goingtoprint

score 0 · Accepted Answer

在你的 CSS 中：

@media print {

    .elementsToHide { 
        display:none; 
    }

    #coupon {
        display:block; 
    }
}

3 回答 3