【发布时间】：2019-03-21 23:03:28
【问题描述】：
我正在使用 wickedpdf 尝试生成漂亮的 pdf 报告。使用 show_as_html: true 来确保一切正常，页面看起来很棒，它使用正确的模板，并且所有内容都按应有的方式加载。没有参考错误或资产错误，这些已通过创建 wickedpdf 特定的 scss 和 js 得到纠正（见下文）：
但是，当我将其设置为 disposition: 'attachment' 以使其实际生成 pdf 时，它看起来与上面的页面完全不同，结果是 pdf 缺少格式并且跨多个页面的组件不连贯。图表也没有渲染，也没有显示数据。似乎它没有应用正确的引导程序/自定义 css，也没有运行创建布局所需的 javascript 文件，如 html 视图所示。任何想法为什么会发生这种情况？我的理解是使用 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
【问题讨论】：
标签： ruby-on-rails pdf wicked-pdf