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

Question

我正在使用wickedpdf来尝试生成漂亮的pdf报告。当使用show_as_html：true以确保一切正常时，页面看起来很棒，它使用正确的模板，并且所有内容都按照它们应该加载。没有引用错误或资产错误，通过创建wickedpdf特定scss和js来纠正这些错误（见下文）：

但是，当我将其设置为处置：'附件'以使其实际生成pdf时，它看起来与上面的页面完全不同，结果是pdf缺少格式并且在多个页面上具有脱节的组件。图表也没有渲染，也没有显示数据。看起来它没有应用正确的bootstrap / custom css，并且它没有运行创建布局所需的javascript文件，如html视图所示。任何想法为什么会这样？我的理解是使用show_as_html：true将呈现与在pdf中看起来完全相同的页面，然后创建pdf将使用这些确切的内容来创建pdf文档。我看过所有其他邪恶的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>

wicked_pdf.css：

@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下载看起来很糟糕

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1