如何使用浏览器（chrome / firefox）HTML / CSS / JS渲染引擎来生成PDF？ [英] How to use the browser's (chrome/firefox) HTML/CSS/JS rendering engine to produce PDF?

问题描述

有很多不错的项目可以从html / css / js文件生成pdf。
$ b

1. http://wkhtmltopdf.org/ （开源）
https://code.google.com/p/flying-saucer/ （开源）

2. http://cssbox.sourceforge.net/ （不一定是直接的pdf生成）


3. http://phantomjs.org/ （开源允许输出pdf）
>

4. http://www.princexml.com/ （comercial but hands down最好的一个）

我想以编程方式控制chrome或firefox浏览器（因为它们都是跨平台的）一个网页，运行脚本和风格的页面和通用吃了一个PDF文件打印。

但是，我该如何从自动化的方式控制浏览器开始，以便我可以做一些像

render-to-pdf file-to-render.html out.pdf

我可以轻松地通过浏览页面手动完成这项工作，然后将其打印到PDF中，一个精确的，符合100％规范的呈现html / css / js页面的pdf文件。甚至可以通过浏览器中的配置选项在pdf中省略url标题。但是，我又该如何开始尝试自动执行此过程？

我想在服务器端自动化，浏览器打开，导航到页面，以及使用浏览器呈现的页面生成PDF。

我做了很多研究，我只是不知道如何制定正确的问题。我希望以编程方式控制浏览器，也许像硒一样，但我将其导出为PDF页面（因此，使用浏览器的渲染功能来生成良好的PDF）

  var page = require （ '网页'）创建（）; 
 page.open（'http://github.com/'，function（）{
 var s = page.evaluate（function（）{
 var body = document.body，
 html = document.documentElement; 
 
 var height = Math.max（body.scrollHeight，body.offsetHeight，
 html.clientHeight，html.scrollHeight，html.offsetHeight）; 
 var width = Math.max（body.scrollWidth，body.offsetWidth，
 html.clientWidth，html.scrollWidth，html.offsetWidth）; 
 return {width：width，height：height} 
 $ b）; 
 
 console.log（JSON.stringify（s））; 
 
 //所以它适合于单个页面
 page.paperSize = {
 width：1980px，
 height：s.height +px，
 margin：{
 top：'50px'，
 left：' 20px'
} 
}; 
 
 page.render（'github.pdf'）; 
 phantom.exit（）; 
}）; 
  

希望它有帮助。

There are nice projects that generate pdf from html/css/js files

1. http://wkhtmltopdf.org/ (open source)
2. https://code.google.com/p/flying-saucer/ (open source)
3. http://cssbox.sourceforge.net/ (not necessarily straight pdf generation)
4. http://phantomjs.org/ (open source allows for pdf output)
5. http://www.princexml.com/ (comercial but hands down the best one out there)

I want to programatically control chrome or firefox browser (because they both are cross platform) to make them load a web page, run the scripts and style the page and generate a pdf file for printing.

But how do I start by controlling the browser in an automated way so that I can do something like

render-to-pdf file-to-render.html out.pdf

I can easily make this job manually by browsing the page and then printing it to pdf and I get an accurate, 100% spec compliant rendered html/css/js page on a pdf file. Even the url headers can be omitted in the pdf through configuration options in the browser. But again, how do I start in trying to automate this process?

I want to automate in the server side, the opening of the browser, navigating to a page, and generating the pdf using the browser rendered page.

I have done a lot of research I just don't know how to make the right question. I want to programatically control the browser, maybe like selenium does but to the point where I export a webpage as PDF (hence using the rendering capabilities of the browser to produce good pdfs)

解决方案

I'm not an expert but PhamtomJS seems to be the right tool for the job. I'm not sure though about what headless browser it uses underneath (I guess it is chrome/chromium)

var page = require('webpage').create();
page.open('http://github.com/', function() {
     var s = page.evaluate(function() {
         var body = document.body,
             html = document.documentElement;

        var height = Math.max( body.scrollHeight, body.offsetHeight, 
            html.clientHeight, html.scrollHeight, html.offsetHeight );
        var width = Math.max( body.scrollWidth, body.offsetWidth, 
            html.clientWidth, html.scrollWidth, html.offsetWidth );
        return {width: width, height: height}
    });

    console.log(JSON.stringify(s));

    // so it fit ins a single page
    page.paperSize = {
        width: "1980px",
        height: s.height + "px",
        margin: {
            top: '50px',
            left: '20px'
        }
    };

    page.render('github.pdf');
    phantom.exit();
});

Hope it helps.

这篇关于如何使用浏览器（chrome / firefox）HTML / CSS / JS渲染引擎来生成PDF？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！