wicked-pdf неправильно отображает pdf.show_html выглядит хорошо, загруженный PDF выглядит ужасно - PullRequest
Новая
       20

wicked-pdf неправильно отображает pdf.show_html выглядит хорошо, загруженный PDF выглядит ужасно

0 голосов
/ 22 марта 2019

Я использую wickedpdf, чтобы создать красивый отчет в формате PDF.При использовании show_as_html: true, чтобы убедиться, что все выглядит правильно, страница выглядит великолепно, она использует правильный шаблон, и все содержимое загружается так, как должно.Нет ошибок ссылок или ошибок активов, они были исправлены путем создания специальных wssedpdf scss и js (см. Ниже):

enter image description here

Однако, когда яустановите его в disposition: 'attachment', чтобы он фактически генерировал pdf, он не похож на страницу выше, и в результате получается pdf, который не имеет форматирования и имеет разрозненные компоненты на нескольких страницах.Графики также не отображаются и не показывают данных.Похоже, что он не применяет правильную загрузочную / пользовательскую CSS и не запускает файлы javascript, необходимые для создания макета, как показано в представлении html.Есть идеи, почему это происходит?Насколько я понимаю, использование show_as_html: true будет отображать ту же самую страницу, как она будет выглядеть в PDF, а затем создание PDF будет использовать именно это содержимое для создания документа PDF.Я просмотрел все остальные вопросы в формате wicked-pdf, но не нашел ничего, что могло бы помочь.

enter image description here

enter image description here

Ниже приведена текущая настройка в контроллере: 

format.pdf do
            render pdf: "#{@interest.name}",
            template: "interests/pdf_export.html.erb",
            layout: 'pdf.html', disposition: 'attachment',
            title: "#{@interest.name}",
            #default_header: true,
            #default_footer: true,
            header: {   spacing: 10,
                        html: {            
                        content: "interests/report_header",
                        layout:   'pdf.html',             # optional, use 'pdf_plain' for a pdf_plain.html.pdf.erb file, defaults to main layout
                        }
                    },
        viewport_size: '1280x1024',
        #show_as_html: true,
        javascript_delay: 10000,
        enable_plugins: true,
        page_size: 'A4'
      end

Вот макет PDF: 

    <!DOCTYPE html>
<html>
<head>
<title>PDF</title>
  <%= wicked_pdf_stylesheet_link_tag 'wickedpdf' %>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">




  <!-- JAVASCRIPT DEPENDENCIES ---->
  <!-- jquery -->
  <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <!-- popper -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <!-- bootstrap -->
  <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script src= "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.19.0/feather.js"></script>

  <%= wicked_pdf_javascript_include_tag 'wickedpdf'%>

</head>
<body>
  <div class='container'>
    <%= yield %>
  </div>
</body>
</html>

wickedpdf.scss: 

@import 'stack/bootstrap';

@import 'stack/fonts/flag-icon-css/css/flag-icon';
@import 'stack/vendors/extensions/pace';

@import 'stack/vendors/extensions/unslider';
@import 'stack/plugins/extensions/noui-slider';

@import "stack/bootstrap-extended";
@import "stack/colors";
@import "wickedpdf/components";

@import 'stack/core/menu/menu-types/vertical-menu';
@import 'stack/core/colors/palette-gradient';
@import 'style';

wickedpdf.js: 

//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/chart.min
//= require stack/vendors/charts/jquery.sparkline.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/extensions/wNumb
//= require stack/vendors/extensions/nouislider.min
//= require stack/vendors/extensions/jquery.steps.min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/vendors/tables/datatable/datatables.min
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common
//= stub ./common/subscriptions

1 Ответ

0 голосов
/ 26 марта 2019

Насколько я понимаю, используется show_as_html: true будет отображать ту же страницу, что и в pdf

Это недоразумение.Мне жаль, что это может показаться так из любой прочитанной вами документации, но show_as_html: true отобразит HTML, который будет отправлен на wkhtmltopdf, однако wkhtmltopdf походит на очень старую версию Chrome (около версии 13,Я думаю).Он не поддерживает flexbox и много других приятных вещей, которые, как мне кажется, нужны более новым версиям Bootstrap.Возможно, некоторые из ваших библиотек JS тоже.

Этот вариант поможет вам быстрее разрабатывать и отлаживать.Гораздо сложнее просматривать исходный текст в формате PDF.

Мой совет - сначала убрать все CSS и JS и попытаться заставить работать самую важную часть (диаграммы), а затем реализовать макет стаблицы или плавающие контейнеры или контейнеры фиксированной ширины, а затем скопируйте биты CSS, которые вам нужны специально для стилей, показанных на странице, а не для всех Bootstrap.

Если эта страница выполняет двойную функцию (обеformat.html и format.pdf версии обслуживаются), я бы предложил разбить PDF на отдельный отдельный шаблон, чтобы посетители HTML по-прежнему получали красивую интерактивную веб-страницу.

...