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

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

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

当我试图从中获取pdf时，正在附加该文件

此外，主要问题不是响应性设计，而是在其上应用打印css

---

这是一个相当棘手的问题，因为在以PDF格式呈现时，没有选项告诉PhantomJS使用

屏幕

你需要

加载包含打印块的所有链接样式表
删除
@media print
块（使用regex很难做到这一点，因为需要注意平衡大括号，但使用普通JS相对容易）
也许您甚至需要将
@media screen
重命名为
@media print
从文档中删除链接的样式表，然后
向DOM中添加一个
样式
元素，该元素的内部有经过处理的样式表（最好在与前一个样式表相同的位置）

你的页面看起来不太好，因为pdf通常会出现分页符之类的情况。另外，页面宽度和视口宽度也很难正确确定。更改页面宽度不会更改视口，因此它不会像像素完美的png那样做出正确的响应。但这只是一个解决方案，如果您不需要可选文本。
在年提出了一个javascript解决方案。本质上，它允许您在更改为打印模式之前，将文档样式表中的所有媒体查询“锁定”到当前适用的任何内容

如果链接消失，代码如下：


函数过程（规则）{
如果（规则cssRules）{
对于（var i=rule.cssRules.length-1；i>=0；i--）{
过程（规则cssRules[i]）；
}
}
if（rule.type==CSSRule.MEDIA\u规则）{
if（window.matchMedia（rule.media.mediaText.matches）{
rule.media.mediaText=“全部”；
}否则{
rule.media.mediaText=“并非全部”；
}
}
返回规则；
}    
对于（var i=0；iWhy不为不同的视口大小使用
page.render（“test.png”）
？@ArtjomB。我想生成一个类似@ArtjomB的pdf（而不是图像）。前面提到过，你也可以为pdf这样做。@AndreyBorisko我知道如何使用phantomjs制作pdf，问题在于pdf的初始设置，即使用打印css打印pdf（@media querys在目标的css文件中），所以它在我打印页面时制作我的pdf，但不像我在浏览器中看到的那样。谢谢，我已经知道制作png比pdf好得多，在图像制作中没有打印和视口问题（根据我的测试）。但我的项目要求它是pdf格式（可选择的文本格式与图像不同）删除@media print看起来不错（唯一的）主意，我会测试一下。此外，我还制作了一个完美查看的公式，即纸张宽度=（“视图\端口\宽度”+（“视图\端口\宽度”的55%）.hey@artjom B.我在生成pdf时遇到了另一个问题。如果您对此有任何问题，请提供帮助。我如何使用此代码段？它是否出现在phantomjs页面、呈现的页面等上？@TetraDev我使用page.evaluate在我的phantomjs中运行此代码app@James.K很好，你能发布一个要点或代码笔等吗。?