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

Answer 2

这很棘手，因为没有选项告诉 PhantomJS 在呈现为 PDF 时使用 screen。

你需要

1. 加载所有包含带有__utils__.sendAJAX 的打印块的链接样式表，
2. 删除@media print 块（这对于正则表达式非常困难，因为您需要注意平衡大括号，但对于普通JS相对容易），
3. 也许您甚至需要将 @media screen 重命名为 @media print，
4. 从文档中删除链接的样式表并
5. 向 DOM 添加一个 style 元素，该元素内部包含已操作的样式表（最好与前一个样式表位于同一位置）。

---

您的页面看起来不太好，因为您通常会在 pdf 中出现分页符等。此外，页面宽度和视口宽度很难正确设置。更改页面宽度不会更改视口，因此它不会是像素完美 png 所具有的正确响应。但这只是您不需要可选文本时的解决方案。