Question

我想知道如何使用pdf格式的PhantomJS呈现自适应页面。我尝试了很多响应页面，发现它使用print css打印pdf。因此，如果页面包含print css OR screen only css，它将使pdf与我们通过打印命令预览（Ctrl + p）找到的相同。

当我在网络浏览器上看到它时，有什么方法可以获得pdf吗？

当我尝试从http://getbootstrap.com/examples/jumbotron/获取pdf时附加文件。

另一个主要问题是没有响应的设计，问题是印刷css应用于它们。

example pdf

Answer 1

这非常棘手，因为在渲染为PDF时，没有选择告诉PhantomJS使用screen。

你需要

加载包含__utils__.sendAJAX，
删除@media print块（这与正则表达式相当困难，因为你需要注意平衡的括号，但使用普通的JS相对容易），
您甚至可能需要将@media screen重命名为@media print，
从文档中删除链接的样式表
添加一个style元素，其中包含操作样式表（最好与前一个样式表在同一位置）。

您的网页看起来不太好看，因为您通常会使用pdf进行分页等。此外，页面宽度和视口宽度很难正确。更改页面宽度不会更改视口，因此它不会成为像素完美png的正确响应。但如果您不需要可选文本，那只是一种解决方案。

Answer 2

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]);
}

如何在PhantomJS中呈现（以pdf格式）响应式页面

2 个答案: