Подтвердить что ты не робот

WkHTMLtoPDF не загружает локальные CSS и изображения

Я видел несколько вопросов, которые очень похожи на этот, поэтому я сначала не решался его опубликовать. Но ничто не предлагало решить мою проблему, и я не могу понять, что не так.

Для проекта, который я сделал для одного клиента, они хотели, чтобы конвертировать кавычки для своих клиентов (сгенерированных с использованием онлайн-формы) в PDF файлы. Достаточно просто. Поскольку весь проект был в PHP, я использовал следующий простой процесс:

  • Сохранить цитату как временный файл HTML
  • Используйте WkHTMLtoPDF для преобразования HTML файла в PDF
  • Вывести этот файл PDF
  • Очистка (удаление временных файлов)

Это работало до тех пор, пока они не изменили серверы. На новом сервере есть брандмауэр.

Сначала шаг преобразования PDF возвращал страницу межсетевого экрана, в которой говорилось, что сервер не может выполнять исходящие подключения. Чтобы решить эту проблему, я напрямую связал файл HTML вместо ссылки на него (/var/www/mysite/temp/18382.html вместо www.example.com/temp/18382.html). Это преобразовало HTML, но брандмауэр предотвратил загрузку CSS и изображений

Я могу преодолеть CSS, просто вставив его непосредственно на сайт вместо ссылки на него (используя теги <style>), но это не работает для изображений

Сначала я попытался использовать относительные ссылки. Я изменил <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, но ничего не исправляет его

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы используете linux, проверьте права собственности на свои изображения. Для окон вы найдете информацию о http://code.google.com/p/wkhtmltopdf/wiki/Usage.

Я пробовал разные пути к изображению:

  • <img src="file:///var/www/testpdf/flowers.jpg"><br>
  • <img src="./flowers.jpg"><br>
  • <img src="flowers.jpg"><br>
  • <img src="/var/www/testpdf/flowers.jpg"><br>

все изображения отображаются правильно. Я не использовал аргументы командной строки (только wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf)

Ответ 2

В моем случае - wkhtmltopdf version 0.12.2.1 (с исправленным qt) - добавление базового тега в раздел заголовка с абсолютным путем, обеспечивающим загрузку изображений и css.

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

Ответ 3

Для 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

Ответ 4

на пути использования Windows: file:///C:/some/dir/some/file.img (обратите внимание на триплекс/)

Ответ 5

Я знаю, что это довольно старая тема, но я просто столкнулся с той же проблемой и, возможно, это поможет кому-то.
Я пробовал разные подходы, например, css background image и используя строку в качестве изображения с кодировкой base64. Иногда это помогало, иногда нет - никакого конкретного правила я не мог найти.
Оказалось, что обновление библиотеки wkhtmltopdf решило проблему. Я использовал версию 0.12.0 и обновлен до 0.12.3

Ответ 6

После того, как я получил всевозможную помощь отсюда и вокруг сети, я обнаружил что-то, что сработало для меня - кодирование в asp.net(С#).

Мне нужно было получить доступ к изображению по URL-адресу (а не по пути к файлу), поскольку исходный HTML-код еще нужно было получить. Благодаря устранению неполадок я обнаружил эти моменты.

  • Эти флаги должны были быть переданы в процесс командной строки: "-q -n -disable-smart-shrinking -images -page-size A4"

  • URL еще должен быть абсолютным.

  • Изображение должно быть jpg! Я изначально пытался сделать gif, безрезультатно.

  • Я обнаружил, что добавление "-enable-local-file-access" не помогло, так как для этого нужно использовать "\" косые черты в пути изображения вместо коллажей "/", что не помогает, если вы также надеемся использовать исходный html (в некоторых браузерах). Кроме того, если вам нужно получить доступ к локальной файловой системе, вам необходимо предоставить абсолютный путь, так как он читает прямо из корня и идет оттуда.

Надеюсь, что это поможет другим.

Приветствия

-y

Ответ 7

Вы можете вставить изображения в кодировке base64, например:

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

Ответ 8

Просто потратил несколько дней на то, чтобы заставить wkhtmltopdf прочитать Flask/Blueprint/static file/css, так что я решил поделиться тем, что узнал.  Win 7, Flask 0.12 на Python 3.4.4 с использованием Pycharm Pro, последней версии pdfkit и wkhtmltopdf.

  1. скачать wkhtmltopdf здесь

  2. установить его -mine на:

    C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe

  3. Сразу после импорта pdfkit в ваш скрипт flask rout.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. СЕЙЧАС в вашей колбе БАЗОВЫЙ ШАБЛОН добавьте , _external = True к вашему маршруту CSS, например:

(это не даст wkhtmltopdf выдать ошибку, не могу найти css)

  1. СЕЙЧАС (серьезный шаблон начальной загрузки с предупреждением "Джуджу"): Зайдите в свою флягу/внешние библиотеки /site-packages/flask_bootstrap/templates/base.html template и:

а. исправить ссылку 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">

б. исправить ссылки 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>

и со всем этим

Ваша конверсия из html в pdf

используя pdfkit и wkhtmltopdf

должен работать без ошибок.

примечание: я перешел на флешку из PHP и, если вы флешер, пожалуйста, опубликуйте свои решения здесь. Сообщество фляг НАМНОГО меньше, чем сообщество PHP, поэтому мы все должны принять участие.

Ответ 9

Для меня проблема была решена с помощью двух вещей: 1: В вашем приложении /config/config.yml
- Под knp_snappy - Для опции time_folder напишите ./
- i.e: временная папка:./
2: Теперь на ваших страницах html.twig удалите актив и напишите:
От: 
 <link rel="stylesheet" type="text/css" href="{{ asset('css/default_template.css') }}">
<Б > To: 
 <link rel="stylesheet" type="text/css" href="css/default_template.css">

И после этого он работал у меня.

Надеюсь, я помог кому-то. Спасибо!

Ответ 10

Это, вероятно, связано с правилами SE Linux или брандмауэром, которые мешают вам выйти в Интернет и вернуться на свой собственный сервер. Вы можете обновить файл хоста, чтобы направить вызовы на ваш домен обратно на домашний адрес вашей машины.

Ответ 11

Когда браузер отображает ваш HTML, он использует относительный путь (иногда с URL в начале), например:

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

Но когда WkHTMLtoPDF работает на вашем сервере, он взаимодействует с вашими локальными файлами напрямую через файловую систему, а не через веб-сервер. Таким образом, для локальных файлов, в отличие от браузера, WkHTMLtoPDF требует фактического пути к файлу:

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

(Это работало для меня с Python Flask)

Ответ 12

Чтобы создать 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" />

Обратите внимание на эту вторую ссылку, она является локальным адресом вашей таблицы стилей или может быть удаленной, как первая ссылка. Путь к файлу у меня не работал, только путь сервера к ресурсу.

PS: В моей ситуации я использую весеннюю загрузку в Intellij IDE, и мне нужно было аннулировать кэш IDE и не работать в режиме отладки, чтобы работать, иначе это может быть не обновить вещи.

Ответ 13

URL изображений должен быть абсолютным, а не относительным. Проверьте этот рабочий пример в шаблоне ветки:

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