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

Question

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

属性“media”下，只有在打印出来时才会使用 print。

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

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

在 print.css 的 CSS 中，它可能看起来像...

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

基本上，复制您正在使用的 CSS，然后设置 display: none;您不想打印的内容。