Question

我正在建立一个显示食谱的网站。每个配方都显示为博客条目的一部分，并在底部有Print this recipe的链接。

我想要发生的是点击该链接打开一个新窗口，并使用打印友好风格的配方版本填充它，该版本已经在其自己的<div class="recipe">内。

我可以单独使用JS / jQuery，还是需要从服务器端进行处理？任何想法如何做到这一点？

编辑：最理想的是动态生成PDF，但代之以我想要一个新窗口，只包含配方，供访问者打印或保存，因为他们认为合适。打印样式很不错，但是大多数人都不知道它们存在，并且无法通过打印出看起来打印就绪的页面来检查和查看。

Answer 1

无需加载不同的样式表，您需要的唯一javascript是触发打印对话框。

仅使用CSS，您可以添加仅在打印时使用的规则，您可以使用media queries

<style type="text/css">
@media print{
    //css printing rules
}
</style>

或使用链接标记：

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

更新：如果您想在不打开新窗口的情况下动态更新样式表，我建议您查看此Nettuts article或更简单的解决方案：

$("#css-switch").click(function() {
     $("link[rel=stylesheet]").attr({href : "red.css"});
});

Answer 2

如果您只使用CSS加载完全相同的页面但使用不同的样式表，则只需使用CSS即可。

Answer 3

是的，你可以（奥巴马先生）。

大多数浏览器都允许您传入data:格式字符串，例如

window.open('data:text/html;charset=utf-8,text%20to%20show');

将打开一个新的窗口/选项卡（即浏览器配置依赖），内容为“要显示的文本”。您可以以相同的方式传递HTML代码，可能已转义。

var print = $('<div>', {
   id:   'foobar',
   html: 'Hello world',
   css:  {
      backgroundColor:   '#ff0000',
      color:    '#ffffff',
      width:    '200px',
      height:   '200px'
   }
}),
opener = $('<div>').append(print);

window.open('data:text/html;charset=utf-8,' + opener.html());

演示：http://www.jsfiddle.net/4yUqL/73/

Answer 4

您可能需要在打印页面上向服务器发出请求，并在表单字段中填入数据。

Answer 5

如果我是你，我会选择pdf创建解决方案。在PHP中动态创建pdf非常简单，它几乎肯定会为主要受众提供更好的用户体验。

如果你想跳过那个例外，我会按照以下方式进行：

1：在原始的非打印机友好页面上获取您需要的数据作为JSON，并use clientside templating来构建ui。存储JSON以便在打印机友好页面上使用

2：当您打开新窗口时，请使用完全相同的方法，但使用另一个针对打印优化的模板。

如何打开新窗口/选项卡并动态填充内容？

5 个答案: