所以我是 Rails 7 的新手，我正在尝试制作一个简单的订单管理 Web 应用程序。我正在使用 Wicked PDF 2.8 (wkhtmltopdf 0.12.6) 根据订单自动生成发票。 pdf 可以工作，但是 css 很奇怪。例如，如果我使用 style="color:red" 它可以工作，但尝试使用 Flex 容器则不行。我在我的程序中使用顺风，但老实说，即使是普通的 css 也可以用于布局之类的事情。
这里有一些类似的问题，但似乎没有一个能解决我的问题。
我的订单控制器有一个简单的显示操作：
def show
@order = Order.find(params[:id])
@entries = OrderToItem.where(order_id: @order)
respond_to do |format|
format.html
format.pdf do
render pdf: "#{DateTime.now.strftime("%m/%d/%Y")}", template: "orders/show", layout: "show", formats: [:html]
end
end
end
以及 show.pdf.erb 作为布局：
<!DOCTYPE html>
<html>
<head>
<title>PDF Layout</title>
<%= csrf_meta_tags %>
<%= wicked_pdf_javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= wicked_pdf_stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= wicked_pdf_stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= wicked_pdf_stylesheet_pack_tag 'tailwind', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= wicked_pdf_stylesheet_link_tag 'tailwind', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div>
<%= yield %>
</div>
</body>
</html>
我尝试过各种 link_tag 或 pack_tag 但老实说我不确定我要在这里做什么。 这是我的 show.html.erb 模板：
<style>
.flex-container {
display: flex;
}
</style>
<div class="flex-container"> <%# Header %>
<div><%= image_tag image_url("logo1.png"), width: "48px", height: "48px" %></div>
<div>street addr</div>
<div>city, state</div>
<div class="text-red-700">zip</div>
<div>Date: <%= DateTime.now.strftime("%d/%m/%Y %H:%M") %></div>
<div>Order No: #<%= @order.id %></div>
</div>
<% @entries.each do |entry| %>
<% @item = Item.find(entry.item_id) %>
<div>
<%= @item.name %> | <%= entry.amount %> x <%= number_to_currency(@item.price, unit: "$", precision: 2) %> = <%= number_to_currency(entry.amount*@item.price, unit: "$", precision: 2) %>
</div>
<br>
<% end %>
所以我希望标题是一个弹性容器（我在这个例子中使用普通的CSS），但邮政编码是使用Tailwind的text-red-700。在 html 视图中，它看起来符合我的预期，但在 pdf 视图中则不然。
如有任何帮助，我们将不胜感激。我可以提供更多详细信息，但老实说，我不太确定你们都需要什么信息。欣赏它。
我认为 Bootstrap 或 Tailwind 在 Wicked PDF 库的 URL.pdf 中不会被识别。您可以创建 CSS 文件并将其嵌入到 HTML 中。它会起作用的。但是，请阅读文档，因为某些标签可能不受支持。