web-dev-qa-db-ja.com

WkHTMLtoPDFがローカルCSSと画像をロードしない

これと非常に類似の質問が複数あるのを見てきたので、最初はそれを投稿するのをためらいました。しかし、私の問題を解決することを示唆するものは何もありませんでしたし、自分が何が間違っているのかを理解できないようです。

私が1人のクライアントのために作成したプロジェクトでは、彼らは顧客の見積もり（オンラインフォームを使用して生成）をPDFに変換したいと考えていました。簡単です。プロジェクト全体がPHPで行われたため、次の簡単なプロセスを使用しました。

  1. 見積もりを一時HTMLファイルとして保存します
  2. WkHTMLtoPDFを使用してHTMLファイルをPDFに変換します
  3. これを出力PDF file
  4. クリーンアップ（一時ファイルの削除）

これは、サーバーを変更するまで機能しました。新しいサーバーにはファイアウォールがあります。

最初にPDF変換ステップは、サーバーがアウトバウンド接続を確立できなかったというファイアウォールページを返していました。これを解決するために、HTMLファイルにリンクする代わりに直接フィードしました（/ var/www www.example.com/temp/18382.htmlの代わりに/mysite/temp/18382.html）。これによりHTMLが変換されましたが、ファイアウォールによりCSSと画像の読み込みが妨げられました。

CSSにリンクするのではなく、サイトに直接埋め込むことで（<style>タグを使用して）CSSを克服できますが、これは画像に対しては機能しません

最初に相対リンクを使用してみました。 <img src="http://www.example.com/temp/image.jpg" />を<img src="./image.jpg" />に変更しました。これはうまくいきませんでした。

次に<img src="file:///var/www/mysite/temp/image.jpg" />を試しましたが、これも機能しませんでした。

WkHTMLtoPDFマニュアルを読み直し、--enable-local-file-access、--enable /var/www/mysite/temp/、--imagesなどのいくつかの異なるコマンドライン引数を試しましたが、何も修正できないようです。

htmlwkhtmltopdf
34
stevendesu

Linuxを使用している場合は、イメージの所有権を確認してください。 Windowsの場合、 http://code.google.com/p/wkhtmltopdf/wiki/Usage にいくつかの情報があります。

画像へのさまざまな種類のパスを試しました。

  1. <img src="file:///var/www/testpdf/flowers.jpg"><br>
  2. <img src="./flowers.jpg"><br>
  3. <img src="flowers.jpg"><br>
  4. <img src="/var/www/testpdf/flowers.jpg"><br>

すべての画像が正しく表示されます。コマンドライン引数を使用しませんでした（wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdfのみ）

25
Bass Jobsen

私の場合、wkhtmltopdfバージョン0.12.2.1（パッチを適用したqtを使用）-絶対パスを使用してヘッドセクションにベースタグを追加すると、画像とCSSが確実に読み込まれます。

<html>
<head>
...
<base href="http://www.example.com/">
<link href="/assets/css/style.css" rel="stylesheet">
...
</head>
30
10us

Windowsの場合、マークアップでファイルシステムの絶対パスを使用する必要があります。例えば：

<link href='C:\Projects\Hello\Hello.Web\Content\custom\home.css' rel='stylesheet' type='text/css' />

！ではなくhttp://localhost/Hello.Web/Content/custom/home.css

11
vladimir

windowsではパスを使用します：file:///C:/some/dir/some/file.img（トリプル/に注意してください）

4
paranoiq

これは非常に古いトピックであることは知っていますが、同じ問題に直面したばかりで、誰かに役立つかもしれません。
css背景画像やbase64エンコードデータ画像として文字列を使用するなど、さまざまなアプローチを試しました。時々それは役立ったが、時には役に立たなかった-特定のルールは見つからなかった。
ライブラリwkhtmltopdfをアップグレードすると問題が解決したことが判明しました。バージョン0.12.0を使用していて、0.12.3にアップグレードしました

3
wladimirec

こことネットの周りからみんなの親切な支援を受けた後、私は私のために働いた何かを発見しました-asp.net（c＃）でのコーディング。

元のソースhtmlにアクセスする必要があるため、URL（ファイルパスではなく）で画像にアクセスする必要がありました。トラブルシューティングを通じて、これらの点を発見しました。

  1. これらのフラグは、コマンドラインプロセスに渡す必要がありました。「-q -n --disable-smart-shrinking --images --page-size A4」

  2. URLは絶対である必要があります。

  3. 画像はjpgでなければなりません！私は元々、gifを実行しようとしていましたが、役に立ちませんでした。

  4. 「--enable-local-file-access」を追加しても役に立たないことがわかりました。「/」スラッシュではなく「\」スラッシュが画像パスに必要であり、ソースも使用したい場合は役に立ちませんhtml（一部のブラウザー）。また、ローカルファイルシステムにアクセスする必要がある場合は、絶対パスを指定する必要があります。これは、ルートから直接読み取り、そこから移動するためです。

これが他の人の役に立つことを願っています。

乾杯

-y

2
Yves

次のようなbase64エンコード画像を挿入できます。

<img src=data:image/png;base64,someBase64content"/>
2
YemM

画像またはスタイルでPDFを生成するには、次のようにサーバーパスを指定する必要があります。

<img src="https://upload.wikimedia.org/wikipedia/...image.png" />

<link href="http://localhost:8080/css/file.css" media="all" rel="stylesheet" type="text/css" />

この2番目のリンクに注意してください。これは、スタイルシートへのローカルアドレスです。または、最初のリンクのようなリモートにすることもできます。ファイルパスは機能せず、リソースへのサーバーパスのみが機能しました。

追伸：私の状況では、Intellij IDEでスプリングブートを使用しており、IDEのキャッシュを無効にし、動作させるためにデバッグモードで実行する必要がありました。 、そうでない場合は更新されない可能性があります。

1
Gui Alencar

ブラウザがHTMLをレンダリングするとき、次のような相対パス（先頭にURLが含まれる場合もあります）を使用します。

<img src="/static/images/some_picture.png">
<img src="http://www.example.com/static/images/some_picture.png">

ただし、WkHTMLtoPDFがサーバー上で実行されている場合、ファイルサーバーを介してローカルファイルと直接インターフェイスし、Webサーバーを介してnotを使用します。ローカルファイルの場合、ブラウザとは異なり、WkHTMLtoPDFは実際のファイルパスを必要とします：

<img src="/var/www/myapplication/static/images/some_picture.png">

（これはPython Flask）でうまくいきました）

1
Josh

Flask/Blueprint/static file/cssをwkhtmltopdfで読み取れるようにするのに数日費やしたので、学んだことを共有したいと思いました。勝利7、Flask 0.12 on Python 3.4.4、Pycharm pro、最新のpdfkitおよびwkhtmltopdfを使用。

  1. wkhtmltopdfをダウンロードします こちら

  2. インストール-mineのインストール先：

    _C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe_

  3. pdfkitをflask routes.pyスクリプトにインポートした直後に、次の行を挿入します。

    _path_wkthmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'_

    config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf)

（ここの最初の行の「r」に注意してください!!）

  1. ルートでpdfkitを使用する場合、引数として "、configuration = config"を追加します。例：

    pdfkit.from_string(html_text, output_filename, configuration = config)

これは、pdfkitにwkhtmltopdfを探す場所を指示します。はい、これを行う必要があります。

  1. NOW flask BASE TEMPLATEにcssルートに_, _external = True_を追加します。例：

（これにより、wkhtmltopdfはcssを見つけることができないエラーをスローしなくなります）

  1. NOW（深刻なbootstrapテンプレートjuju警告）：flask/external libraries/site-packages/flask_bootstrap/templates /base.html template and：

a。 CSSリンクを修正します。

_<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">
_

「http：」を追加して、次のようにします。

_<link href="http:{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">
_

b。 JSリンクを修正します。

「http：」を追加すると、JSリンクは次のようになります。

_<script src="http:{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>

<script src="http:{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
_

そしてこれすべてで

flask htmlからpdfへの変換

pdfkitとwkhtmltopdfを使用する

エラーなしで実行する必要があります。

注：私はflask from PHPに移動しました。もしあなたがフラスコ使いなら、ここに解決策を投稿してください。flaskコミュニティはPHPコミュニティよりもはるかに小さいので、私たち全員が参加する必要があります。

1
pelon

これはおそらく、SE Linuxまたはファイアウォールルールが原因で、インターネットに出て自分のサーバーに戻ることができないためです。ホストファイルを更新して、ドメインへの呼び出しをマシンのホームアドレスに戻すことができます。

1
E W

画像のURLは相対ではなく絶対でなければなりません。 twigテンプレートでこの実例を確認してください：

<img src="{{ absolute_url(asset('images/example.png')) }}"/>
1
numediaweb