3

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

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

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

此外，主要问题不是响应式设计，而是应用在它们上的打印 css。

示例 pdf

4

2 回答 2

1

jorupp在这个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]);
}

于 2016-05-30T18:23:03.920 回答
0

这非常棘手，因为没有选项告诉 PhantomJSscreen在呈现为 PDF 时使用。

你需要

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

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

于 2014-08-11T19:56:26.227 回答