打印修改后的网页而不显示它

Question

我正在尝试在电子商务产品页面上实现"打印此页面"。它将没有不必要的部分，如顶部导航，页脚，添加到购物车按钮等。我希望它像 target.com 一样工作http://www.target.com/Avalon-Vitamin-Moisture-Plus-Lotion/dp/B00120ZAYI/ref=sr_1_13?ie=UTF8&searchView=grid5&keywords=vitamins&fromGsearch=true&sr=1-13&qid=1305580954&rh=&searchRank=target104545&id=Avalon%20Vitamin%20Moisture%20Plus%20Lotion&node=1038576|1287991011&searchSize=30&searchPage=1&searchNodeID=1038576|1287991011&searchBinNameList=subjectbin%2Cprice%2Ctarget_com_primary_color-bin%2Ctarget_com_size-bin%2Ctarget_com_brand-bin&frombrowse=0

如果您尝试打印它，则只会打印基本内容。我很困惑如何实现它。我是否应该创建产品页面的修改版本并打印出来而不向用户显示？请指教。

Answer 1

您可以设置一个自定义 CSS 页面，该页面隐藏了页眉、导航、页脚或任何您喜欢的内容，以便当用户单击打印时，Web 浏览器会查看打印 CSS 并按照您想要的方式进行操作。

这方面的例子是：

在 HTML 中

<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print">

在"媒体"属性下，打印仅在打印时使用。

在 CSS for main.css 中，可能看起来像..

header { font-size: 32px; }
nav { font-size: 14px; }
footer { font-size: 10px; text-align: center; }

在用于打印的 CSS 中.css，它可能看起来像...

header { display: none; }
nav { display: none; }
footer { display: none; }

基本上，复制你正在使用的CSS，并设置显示：none;到你不想打印的内容。