Phantom JS for Node,使用打印样式表?

时间:2014-06-05 08:42:25

标签: node.js stylesheet phantomjs

我使用Node JS生成PDF。

有没有办法让Phantom JS使用打印样式表而不是屏幕样式来截取页面?

目前我已经设置了打印样式表并且很好用,但是Phantom JS被识别为屏幕设备而不是打印。

这里有一段代码,所以你可以看到我在做什么。

提前致谢!

    var date = Date.now();
    var images = [];

    capture(results.length, 0);

    function capture(pagesLength, pageId) {
        if (pagesLength <= 0) {
            stopCapture();
        }
        else {
            snapshot(pagesLength, pageId);
        }
    }

    function snapshot(pagesLength, pageId) {
        phantom.create(function (ph) {
            ph.createPage(function (page) {
                page.open("http://127.0.0.1:3000/#/pages/" + results[pageId]["_id"], function (status) {
                    var fileName = results[pageId]["_id"] + ".jpeg";
                    images.push(fileName);
                    page.render("public/temp/" + date + "/" + fileName, {format: 'jpeg', quality: '100'}, function () {
                        pagesLength--;
                        pageId++;
                        ph.exit();
                        if (pagesLength <= 0) {
                            mergeImages();
                        } else {
                            snapshot(pagesLength, pageId);
                        }
                    });
                });
            });
        });
    }

1 个答案:

答案 0 :(得分:3)

你不能改变它,因为它在QtWebkit中是硬编码的。您可以尝试两种方法。


<强>首先

如果您的打印样式表与屏幕样式分开:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="printstyle.css" type="text/css" media="print" />

然后您可以删除屏幕样式并更改evaluate内的打印样式表的媒体类型:

Array.prototype.forEach.call(document.querySelectorAll("link:not([media='print']), style"), function(el){
    el.parentNode.removeChild(el);
});
Array.prototype.forEach.call(document.querySelectorAll("link[media='print']"), function(el){
    el.media = "screen";
});

(^未经测试)

这应该产生:

<link rel="stylesheet" href="printstyle.css" type="text/css" media="screen" />

你可能需要等待一段时间,直到幻影应用这些风格。


<强>第二

使用更改的媒体类型编译您自己的phantomjs版本。

您目前可以在line 125 of src / qt / src / 3rdparty / webkit / Source / WebCore / page / FrameView.cpp下找到它:

FrameView::FrameView(Frame* frame)
...
    , m_mediaType("screen")
...

(^也未经测试)

screen更改为print,编译并享受乐趣。