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

Php 如何打开新窗口/选项卡并动态填充内容?,php,javascript,jquery,Php,Javascript,Jquery,我正在建立一个网站,显示食谱。每个菜谱都会作为博客条目的一部分出现,并且在底部会有一个链接来打印此菜谱 我想做的是点击链接打开一个新窗口,并将其填充为配方的打印友好样式版本,它已经在自己的中 我可以单独使用JS/jQuery来完成这项工作,还是需要从服务器端进行处理?有什么办法吗 编辑:理想的做法是动态生成PDF,但作为替代,我希望有一个新窗口,只包含配方,供访问者打印或保存,因为他们认为合适。打印样式很好,但是大多数人并不知道它们的存在,也不必费心去检查和查看打印出来的页面,因为它看起来没有打

我正在建立一个网站,显示食谱。每个菜谱都会作为博客条目的一部分出现,并且在底部会有一个链接来打印此菜谱

我想做的是点击链接打开一个新窗口,并将其填充为配方的打印友好样式版本,它已经在自己的

我可以单独使用JS/jQuery来完成这项工作,还是需要从服务器端进行处理?有什么办法吗


编辑:理想的做法是动态生成PDF,但作为替代,我希望有一个新窗口,只包含配方,供访问者打印或保存,因为他们认为合适。打印样式很好,但是大多数人并不知道它们的存在,也不必费心去检查和查看打印出来的页面,因为它看起来没有打印就绪。

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

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

如果你让它加载完全相同的页面但使用不同的样式表,你可以简单地用CSS来完成。

如果你让它加载完全相同的页面但使用不同的样式表,你可以简单地用CSS来完成。

是的,你可以(你好,奥巴马先生)

大多数浏览器允许您传入
数据:
格式字符串,如

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());
var print=$(''{
id:‘foobar’,
html:“你好,世界”,
css:{
背景颜色:“#ff0000”,
颜色:“#ffffff”,
宽度:“200px”,
高度:“200px”
}
}),
开场白=$('')。追加(打印);
open('data:text/html;charset=utf-8,'+opener.html());
演示

是的,你可以(你好,奥巴马先生)

大多数浏览器允许您传入
数据:
格式字符串,如

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());
var print=$(''{
id:‘foobar’,
html:“你好,世界”,
css:{
背景颜色:“#ff0000”,
颜色:“#ffffff”,
宽度:“200px”,
高度:“200px”
}
}),
开场白=$('')。追加(打印);
open('data:text/html;charset=utf-8,'+opener.html());

演示

无需加载其他样式表,您只需使用javascript来触发打印对话框

仅使用CSS,您就可以添加仅在打印时使用的规则,您可以使用


无需加载不同的样式表,您只需使用javascript来触发打印对话框

仅使用CSS,您就可以添加仅在打印时使用的规则,您可以使用


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

如果你想跳过这个练习,我会用以下方法:

1:在原始的非printerfriendly页面上获取所需的JSON数据,并构建ui。存储JSON以在printerfriendly页面上使用


2:当你打开新窗口时,使用完全相同的方法,但使用另一个为打印而优化的模板。

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

如果你想跳过这个练习,我会用以下方法:

1:在原始的非printerfriendly页面上获取所需的JSON数据,并构建ui。存储JSON以在printerfriendly页面上使用


2:打开新窗口时,使用完全相同的方法,但使用另一个为打印而优化的模板。

非常正确。我只是假设他想先在屏幕上向用户展示它的样子。是的,这在问题中不是很清楚,实际上可能是这样。明白了,我添加了一些你可能会觉得有用的链接。非常正确。我只是假设他想先在屏幕上向用户展示它的样子。是的,这在问题中不是很清楚,实际上可能是这样。明白了,我添加了一些你可能会觉得有用的链接。这在ie8或ie7中不起作用,ie8或ie7是网络上最常用的两种浏览器。。。对于菜谱网站来说,这可能不是一个理想的解决方案……这在ie8或ie7中是行不通的,ie8或ie7是网络上最常用的两种浏览器。。。可能不是配方网站的理想解决方案。。。
$("#css-switch").click(function() {
     $("link[rel=stylesheet]").attr({href : "red.css"});
});