web-dev-qa-db-ja.com

Node.jsでPDFへのHTML

ウェブサイトのウェブページの印刷可能なpdfバージョンを作成したいと考えています。 express.render()のようなものは、ページをpdfとしてのみレンダリングします

誰もがそれを行うノードモジュールを知っていますか？

そうでない場合は、どのように実装しますか？ phantom.jsのようなヘッドレスブラウザーを使用する方法について話す方法を見たことがありますが、どのような流れなのかわかりません。

node.jsexpresspdf-generation
71
Michael

ムスタファの答えに基づいて拡張します。

A）インストール http://phantomjs.org/ その後

B）ファントムノードモジュールをインストールします https://github.com/amir20/phantomjs-node

enter image description here

C）これは、pdfのレンダリングの例です

var phantom = require('phantom');   

phantom.create().then(function(ph) {
    ph.createPage().then(function(page) {
        page.open("http://www.google.com").then(function(status) {
            page.render('google.pdf').then(function() {
                console.log('Page Rendered');
                ph.exit();
            });
        });
    });
});

PDFの出力：

enter image description here

EDIT：そのPDFのサイレント印刷

Java -jar pdfbox-app-2.0.2.jar PrintPDF -silentPrint C:\print_mypdf.pdf

88
Jozzhart

Phantom.js はヘッドレスWebkitサーバーであり、Webページをロードしてメモリにレンダリングしますが、表示できない場合がありますが、エクスポートできるスクリーンキャプチャ機能があります現在のビューをPNG、PDF、JPEG、GIFとして。これをご覧ください phantom.jsドキュメントの例

22
Mustafa

HTMLをPDFにエクスポートする場合。多くのオプションがあります。ノードなしでも

オプション1：htmlページにwindow.print（）関数を呼び出すボタンを配置します。ブラウザのネイティブHTMLからPDFを使用します。メディアクエリを使用して、HTMLページをPDFで見やすくします。また、印刷前にページを変更するために使用できるイベントの前後に印刷することもできます。

オプション2. htmltocanvas または rasterizeHTML 。 htmlをcanvasに変換してから、canvasオブジェクトでtoDataURL（）を呼び出して画像を取得します。 jsPDF などのJavaScriptライブラリを使用して、その画像をPDFファイルに追加します。このアプローチの欠点は、pdfが編集可能にならないことです。 PDFからデータを抽出する場合は、さまざまな方法があります。

オプション3. @Jozzhardの回答

14
MurWade

私が見つけた最良の解決策はhtml-pdfです。シンプルで、大きなHTMLで動作します。

https://www.npmjs.com/package/html-pdf

それと同じくらい簡単です：

    pdf.create(htm, options).toFile('./pdfname.pdf', function(err, res) {
        if (err) {
          console.log(err);
        }
    });
10
Thermech

Puppeteerを使用して、HTMLからPDFを作成してみてください

ここからの例 https://github.com/chuongtrh/html_to_pdf

または https://github.com/GoogleChrome/puppeteer

6
ChuongTran

外部URLからPDFを作成

以下は、html-pdfを利用する以前の回答の適応ですが、外部URLでも機能するようにrequestifyと組み合わせています。

依存関係をインストールする

npm i -S html-pdf requestify

次に、スクリプトを作成します。

//MakePDF.js

var pdf = require('html-pdf');
var requestify = require('requestify');
var externalURL= 'http://www.google.com';

requestify.get(externalURL).then(function (response) {
   // Get the raw HTML response body
   var html = response.body; 
   var config = {format: 'A4'}; // or format: 'letter' - see https://github.com/marcbachmann/node-html-pdf#options

// Create the PDF
   pdf.create(html, config).toFile('pathtooutput/generated.pdf', function (err, res) {
      if (err) return console.log(err);
      console.log(res); // { filename: '/pathtooutput/generated.pdf' }
   });
});

次に、コマンドラインから実行するだけです：

node MakePDF.js

完璧な美化ピクセルを見るPDFあなたのために作成される（無料！）

6
TetraDev

パッケージ

html-pdf を使用しました

使いやすく、pdfをファイルとして保存するだけでなく、pdfコンテンツをWriteStreamにパイプすることもできます（そのため、レポートを保存するためにGoogleストレージに直接ストリーミングできます）。

css + imagesを使用する

CSSを考慮に入れます。私が直面した唯一の問題-それは私の画像を無視しました。私が見つけた解決策は、src attrribute値のurlをbase64に置き換えることでした。

<img src="data:image/png;base64,iVBOR...kSuQmCC">

コードを使用するか、オンラインコンバーターのいずれかを使用することができます。 https://www.base64-image.de/

htmlフラグメント+ cssから有効なhtmlコードをコンパイルします

  1. htmlドキュメントのフラグメントを取得する必要がありました（jQueryセレクターで.html（）メソッドを適用しました）。
  2. 次に、関連するcssファイルの内容を読みました。

この2つの値（変数htmlおよびcssに応じて格納）を使用して、 テンプレート文字列 を使用して有効なhtmlコードをコンパイルしました

var htmlContent = `
<!DOCTYPE html>
<html>
  <head>
    <style>
      ${css}
    </style>
  </head>
  <body id=direct-sellers-bill>
    ${html}
  </body>
</html>`

そして、それを html-pdf のcreateメソッドに渡しました。

3
Alexander

サーバーにChrome/FirefoxのインスタンスとともにPhantomJSをインストールしたくない場合、または PhantomJSプロジェクトがcurrently中断 、これは代替案です。

APIへの変換を外部化して、ジョブを実行できます。多くは存在し、変化しますが、あなたが得るものは、最新の機能を備えた信頼できるサービスです（CSS3、Webフォント、SVG、Canvas互換性を考えています）。

たとえば、 PDFShift （免責事項、私は創始者です）を使用すると、requestパッケージを使用するだけでこれを実行できます。

const request = require('request')
request.post(
    'https://api.pdfshift.io/v2/convert/',
    {
        'auth': {'user': 'your_api_key'},
        'json': {'source': 'https://www.google.com'},
        'encoding': null
    },
    (error, response, body) => {
        if (response === undefined) {
            return reject({'message': 'Invalid response from the server.', 'code': 0, 'response': response})
        }
        if (response.statusCode == 200) {
            // Do what you want with `body`, that contains the binary PDF
            // Like returning it to the client - or saving it as a file locally or on AWS S3
            return True
        }

        // Handle any errors that might have occured
    }
);
3
Cyril N.

使用html-pdf

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./test/businesscard.html', 'utf8');
var options = { format: 'Letter' };

pdf.create(html, options).toFile('./businesscard.pdf', function(err, res) {
  if (err) return console.log(err);
  console.log(res); // { filename: '/app/businesscard.pdf' } 
});
1
Krishan

ExpressのビューテンプレートからPDFを作成する方法を探してここに到着した場合、同僚と私は express-template-to-pdf を作成しました

expressで使用しているテンプレート（Pug、Nunjucksなど）からPDFを生成できます。

Html-pdfに依存し、res.renderを使用するのと同じようにルートで使用するように記述されています。

const pdfRenderer = require('@ministryofjustice/express-template-to-pdf')

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')

app.use(pdfRenderer())

Res.renderを使用した場合、それを使用することは明らかです。

app.use('/pdf', (req, res) => {
    res.renderPDF('helloWorld', { message: 'Hello World!' });
})

オプションをhtml-pdfに渡して、PDFドキュメントのページサイズなどを制御できます。

単に他人の優れた仕事の上に構築します。

0
Todderz