java 如何使用浏览器(chrome/firefox)的 HTML/CSS/JS 渲染引擎生成 PDF?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25574082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-11-02 08:15:40  来源:igfitidea点击:

How to use the browser's (chrome/firefox) HTML/CSS/JS rendering engine to produce PDF?

javahtmlgoogle-chromepdfpdf-generation

提问by David Hofmann

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

有一些不错的项目可以从 html/css/js 文件生成 pdf

  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)
  6. https://thepdfapi.com/a chrome modification to spit pdf from html from
  1. http://wkhtmltopdf.org/(开源)
  2. https://code.google.com/p/flying-saucer/(开源)
  3. http://cssbox.sourceforge.net/(不一定直接生成pdf)
  4. http://phantomjs.org/(开源允许pdf输出)
  5. http://www.princexml.com/(商业但传下来最好的一个)
  6. https://thepdfapi.com/从 html 中吐出 pdf 的 chrome 修改

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.

我想以编程方式控制 chrome 或 firefox 浏览器(因为它们都是跨平台的),使它们加载网页,运行脚本并设置页面样式并生成用于打印的 pdf 文件。

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

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?

我可以通过浏览页面然后将其打印为 pdf 来轻松地手动完成这项工作,我会在 pdf 文件上获得准确的、100% 符合规范的渲染 html/css/js 页面。通过浏览器中的配置选项,甚至可以在 pdf 中省略 url 标题。但同样,我如何开始尝试自动化这个过程?

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.

我想在服务器端自动化,打开浏览器,导航到一个页面,并使用浏览器呈现的页面生成 pdf。

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)

我做了很多研究,我只是不知道如何提出正确的问题。我想以编程方式控制浏览器,可能像 selenium 一样,但到了我将网页导出为 PDF 的程度(因此使用浏览器的渲染功能来生成好的 pdf)

采纳答案by Guillermo Gutiérrez

Firefox has an API method for that: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF

Firefox 有一个 API 方法:https: //developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF

browser.tabs.saveAsPDF({})
  .then((status) => {
    console.log('PDF file status: ' + status);
  });

However, it seems to be available only for Browser Extensions, not to be invoked from a web page.

但是,它似乎仅适用于Browser Extensions,不能从网页调用。

I'm still looking for a public API for that...

我仍在为此寻找公共 API...

回答by crodas

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)

我不是专家,但 PhamtomJS 似乎是适合这项工作的工具。我不确定它在下面使用什么无头浏览器(我猜它是铬/铬)

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.

希望能帮助到你。