未应用 PDFkit *.css 样式表 [英] PDFkit *.css stylesheets not being applied

问题描述

我正在尝试使用 pdfkit 将显示图像的 html 页面从 facebook cdn 转换为 pdf.我正在使用 rails 4.2、pdfkit 0.6.2 和 wkhtmltopdf-binary 0.9.9.3.

I am trying to convert a html page that displays images from facebook cdn to pdf using pdfkit. I am using rails 4.2, pdfkit 0.6.2 and wkhtmltopdf-binary 0.9.9.3.

# Gemfile
gem 'pdfkit'
gem 'wkhtmltopdf-binary'

# controller
def generate_pdf
  @booklet = Booklet.find params[:id]
  @cover = Image.last
  @images = @booklet.images.sort_by(&:uploaded_at)
  respond_to do |format|
    format.html
    format.pdf do
      html = render_to_string(layout: true , action: "generate_pdf.html.haml")
      kit = PDFKit.new(html, page_size: 'A4', orientation: 'Landscape')
      `sass vendor/assets/stylesheets/bootstrap.scss tmp/bootstrap.css`
      `sass vendor/assets/stylesheets/custom.scss tmp/custom.css`
      kit.stylesheets << "#{Rails.root}/tmp/bootstrap.css"
      kit.stylesheets << "#{Rails.root}/tmp/custom.css"
      pdf = kit.to_pdf
      send_data pdf, filename: 'booklet.pdf', type: 'application/pdf'
    end
  end
end

# application.scss
@import 'bootstrap';                                                                                                                                           
@import 'custom';

# config/application.rb
require 'pdfkit'
config.middleware.use PDFKit::Middleware

# config/initializers/mime_types.rb
Mime::Type.register "application/pdf", :pdf unless Mime::Type.lookup_by_extension(:pdf)

正在生成 pdf 并显示 facebook cdn 图像，但未应用样式表.我缺少什么?

The pdf is getting generated and the facebook cdn images are displayed but the stylesheets arent being applied.What am I missing?

我在这里为上述问题创建了一个示例存储库:https://github.com/prasadsurase/topdf

I have created a sample repository for the above problem here: https://github.com/prasadsurase/topdf

仅供参考，bootstrap.css 和 custom.css 位于 vendor/assets 中，并且扩展名已重命名为 scss.在 sass 中，资产(字体和图像)已使用 'font-path' 和 'image-url' rails helper 引用.资产被预编译，应用程序-....css 被复制到 pdf.css 和资产从根路径(/)引用

FYI, the bootstrap.css and custom.css are placed in vendor/assets and have extensions have been renamed to scss. In sass, the assets(fonts and images) have been referred using 'font-path' and 'image-url' rails helper. The assets were precompiled and the application-....css was copied to pdf.css and the assets are referred from the root path(/)

推荐答案

Bootstrap 对您应用程序中的其他页面是否正常工作?-- 目的是确保您正确配置元标记以包含 Bootstrap 文件，并且您指向 Bootstrap 文件(似乎在/tmp 中?)

Does Bootstrap work correctly for other pages in your application? -- The aim is to make sure that you configured the meta tags correctly to include the Bootstrap files, and that you are pointing to the Bootstrap files (which seem to be in /tmp?)

另外，你在什么操作系统上编码?我可以建议将 "#{Rails.root}/tmp/bootstrap.css" 替换为 Rails.root.join('tmp','bootstrap.css')

Also, on what OS are you coding? May I recommend to substitute "#{Rails.root}/tmp/bootstrap.css" with Rails.root.join('tmp','bootstrap.css')

让我知道这些是否有帮助 - 或没有.

Let me know if these help at all -- or not.

这篇关于未应用 PDFkit *.css 样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！