responsive-design - 如何在 PhantomJS 中呈现(以 pdf 格式)响应页面

Question

我想知道如何使用 PhantomJS 以 pdf 格式呈现响应式页面。我尝试了很多响应页面，发现它正在使用打印 css 打印 pdf。因此，如果页面包含打印 css 或仅屏幕 css，它将呈现与我们通过打印命令预览 (Ctrl + p) 找到的相同的 pdf。

有什么方法或脚本可以让我获得在网络浏览器上看到的 pdf 吗？

当我试图从 http://getbootstrap.com/examples/jumbotron/ 获取 pdf 时附上文件.

另外，主要问题不是响应式设计，问题是在它们上面应用了打印 css。

example pdf

Answer 1

jorupp在 this gist 中提出了一个 javascript 解决方案.它实质上让您在更改为打印模式之前将文档样式表中的所有媒体查询“锁定”为当前适用的任何内容。

万一链接消失了，这里是代码:

function process(rule) { 
	if(rule.cssRules) { 
		for(var i=rule.cssRules.length-1; i>=0; i--) { 
			process(rule.cssRules[i]);
		}
	}
	if(rule.type == CSSRule.MEDIA_RULE) {
		if(window.matchMedia(rule.media.mediaText).matches) {
			rule.media.mediaText = "all";
		} else {
			rule.media.mediaText = "not all";
		}
	}
	return rule;
}    
for(var i=0; i<document.styleSheets.length; i++) { 
	process(document.styleSheets[i]);
}