Question

我正在使用wickedpdf尝试生成美观的pdf报告。使用show_as_html：true时，请确保所有内容看起来正确，页面看起来不错，使用正确的模板，并按需加载所有内容。没有参考错误或资产错误，可以通过创建wickedpdf特定的scss和js（参见下文）来纠正这些错误：

但是，当我将其设置为处置：“附件”以使其实际生成pdf时，它看起来与上面的页面完全不同，结果是pdf缺少格式，并且跨多个页面的组件不连贯。图形也不会呈现，也不会显示任何数据。似乎未应用正确的bootstrap / custom css，并且未运行html视图中所示的创建布局所需的javascript文件。任何想法为什么会这样？我的理解是使用show_as_html：true将呈现与pdf中完全相同的页面，然后创建pdf将使用这些确切内容创建pdf文档。我查看了所有其他wicked-pdf问题，但找不到任何有用的东西。

以下是控制器中的当前设置：

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

Answer 1

我的理解是使用show_as_html：true将呈现与pdf中完全相同的页面

这是一个误会。很抱歉，无论您阅读了什么文档，似乎都采用了这种方式，但是show_as_html: true将显示将发送到wkhtmltopdf的HTML，但是wkhtmltopdf就像是旧版本的Chrome（我认为版本13左右）。它不支持flexbox以及许多类似的好东西，我认为需要新版本的Bootstrap。可能也有一些JS库。

该选项可以帮助您更快地进行开发和调试。在PDF上查看源代码要困难得多。

我的建议是先剥离所有CSS和JS，并尝试使最重要的部分起作用（图表），然后使用表或浮点数或固定宽度的容器实现布局，然后复制您需要页面上显示的样式专用的CSS，而不是全部Bootstrap。

如果这是一个承担双重职责的页面（同时提供format.html和format.pdf两个版本），我建议您将PDF拆分成自己的单独模板，这样HTML访问者仍然可以得到漂亮的页面交互式网页。

wicked-pdf无法正确呈现pdf。 show_html看起来不错，下载的pdf看起来很糟糕

1 个答案: