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

Question

我想知道如何使用PhantomJS以pdf格式呈现响应式页面。我尝试了这么多响应页面，发现它正在使用打印css打印pdf。因此，如果页面包含print css或screen only 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]);
}

​

Answer 2

这是相当棘手的，因为没有选项来告诉PhantomJS在呈现为PDF时使用screen。

您将需要

1. 使用__utils__.sendAJAX加载包含打印块的所有链接样式表，
2. 删除@media print块(使用正则表达式很难，因为您需要注意平衡大括号，但使用普通JS相对容易)，
3. 您甚至可能需要将@media screen重命名为<代码>D10，<代码>H211<代码>H112从文档中删除链接的样式表，<代码>H213<代码>H114向DOM中添加一个D15元素(最好在与以前的样式表相同的位置)。<代码>H216<代码>G217

你的页面看起来不会很好，因为你通常会有分页符之类的pdf。此外，页面宽度和视口宽度也很难正确处理。更改页面宽度不会更改视口，因此它不会像像素完美的png那样具有正确的响应性。但这只是一个解决方案，如果你不需要可选择的文本。