代码之家 › 专栏 › 技术社区 › Artem Sokolov

当导出rmarkdown render到.pdf时,puppeteer不尊重颜色

puppeteer knitr r-markdown r css

Artem Sokolov · 技术社区 · 8 年前

。---
输出:HTML_文档

<样式>
-Webkit打印颜色调整:精确;

H4颜色:蓝色;





wait page.pdf(path:'test.pdf',printbackground:true);
})();







但是,colorbackground-color木偶演员RMarkdownknitr

test.Rmd

---
title: "Testing colors"
output: html_document
---

<style>
html {
  -webkit-print-color-adjust: exact;
}

h4 {color: blue;}
</style>

#### Blue heading
<div style="color:red">This text is red</div>
<div style="background-color:red">This text has red background</div>


test.html通过呼叫rmarkdown::render( "test.Rmd", output_file="test.html" )-webkit-print-color-adjust

puppeteer tutorialsrender.js以下内容:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({width: 400, height: 200});
    await page.goto('file:///home/sokolov/test/puppeteer/test.html');
    await page.screenshot({path: 'test.png'});
    await page.pdf({path: 'test.pdf', printBackground: true});
    await browser.close();
})();


node render.js从命令行生成test.pngtest.pdf.前者看起来正符合您的预期:



.pdf



渲染.jshttps://www.w3schools.com/css/css_background.asp.png格式。指定printBackground: true.



输出:PDF文档.Rmd,我要注意的是,我正在使用的实际rmarkdown文档flexdashboarddoesn't play nicely with knitr.我读过的大多数教程都建议使用无头浏览器来呈现最终版本。.html

1 回复 | 直到 8 年前

John Hoffer 8 年前

!important 标签?我们的目标是 rmarkdown:render

echo "%s/%21important// | w!" | vim -e test.html

我的第一次尝试

echo "%s/%40media%20print%7B.\{-}%7D// | w!" | vim -e test.html

上述命令将覆盖 test.html @media print{} @媒体打印 测试.html

这就是我要做的

%s/%40media%20print%7B.\{-}%7D//

%s/@media print{.\{-}}//

@media print {a: ""} 完全正确。我没有正确处理嵌套方括号,因此此脚本只部分删除这样的语句 @media print {.a{a: ""};b{}...} .\{-} .* ,这可能会去除太多。

URL decoded 为了可读性。您可以看到我删除了不匹配的大括号。很可能,有问题的CSS实际上并没有被删除,但是删除这些行足以破坏CSS,从而在任何时候都禁用有问题的CSS @media print

@media print{*,:after,:before{color:#000!important;text- 
shadow:none!important;background:0 0!important;-webkit-box- 
shadow:none!important;box-shadow:none!important}

@media print{.visible-print{display:block!important}

@media print{.visible-print-block{display:block!important}

@media print{.visible-print-inline{display:inline!important}

@media print{.visible-print-inline-block{display:inline-block!important}

@media print{.hidden-print{display:none!important}