用于 Node 的 Phantom JS，使用打印样式表？

Question

我正在使用 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);
                        }
                    });
                });
            });
        });
    }

Answer 1

您无法更改它，因为它在 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" />

您可能需要稍等片刻，直到 phantom 应用样式。

---

第二：

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

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

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

（^ 也未经测试）

把screen改成print，编译一下，玩得开心。