0

我正在尝试在电子商务产品页面上实现“打印此页面”。它将没有不必要的部分，如顶部导航、页脚、添加到购物车按钮等。我希望它像 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

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

4

1 回答 1

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">

在“媒体”属性下，打印只会在打印出来时使用。

在 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; 到你不想打印的东西。

于 2011-05-17T02:05:38.540 回答