Unable to apply bootstrap in pdf

gouravmodi commented 9 years ago

Bootstrap works fine when debug=1 is passed as params but does'nt work when pdf is rendered. Is there any solution to this?

unixmonkey commented 9 years ago

How are you including bootstrap into your layout?

The recommended way to include stylesheets is to first add them to the asset precompile list:

config/initializers/assets.rb

Rails.application.config.assets.precompile += ['bootstrap.css']

Then use <%= wicked_pdf_stylesheet_link_tag('bootstrap') %> to load it in your PDF view.

If you are using a regular CDN reference, some versions of wkhtmltopdf don't deal with HTTPS very well, so you might need to change to HTTP, or upgrade wkhtmltopdf.

I've heard good things about this gem:

Gemfile

gem 'wkhtmltopdf-binary-edge'

Let me know how it goes!

sghosh23 commented 9 years ago

@gouravmodi I am facing the same issue. if you already have solution, can you share?

@unixmonkey I am using twitter-bootstrap. i did what you told to do, i just changed "bootstrap" with "application" because when using bootstrap no css is rendered.

gouravmodi commented 9 years ago

Just add these two lines in stylesheets/application.scss @import "bootstrap-sprockets"; @import "bootstrap"; make sure the extension of the stylesheet file should be scss and add this gem to your gem file gem 'bootstrap-sass' It should work fine.

beechnut commented 8 years ago

I had this same issue applying Semantic UI from a CDN, and it turns out it was because of the HTTPS.

I changed the links to http, and now it's working great. Thanks @unixmonkey!

I'm using wkhtmltopdf-binary version 0.9.9.3.

EDIT

Then I updated to edge (per @unixmonkey's suggestion) and put the s back into https, and again, it's working great!

wawanabnan commented 7 years ago

beechnut, Great. thx.

anga20 commented 7 years ago

hi i am using bootstrap css in my page .while converting html to pdf .that time bootstrap css not accepteing pls help guys

unixmonkey commented 7 years ago

Is Bootstrap being precompiled as shown in the 2nd comment on this issue? Are you loading from a CDN? What versions of wkhtmltopdf are you using (or what version of the gem, if you are using one)? Does normal PDF creation without Bootstrap work?

shairyar commented 6 years ago

I am using the

latest version of wicked_pdf
Rails 5.1.4
I have tried both CDN and bootstrap gem

and this is what my layout look like while using CDN

Try 1

<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
  <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" %>
</head>
<body>
  <div class='container'>
     <%= render partial: 'employers/profiles/profile',%>
  </div>
</body>
</html>

But I see no bootstrap effect, the pdf gets generated with the data. I am using bootstrao grid and i see no effect on where i am usingcol-md-8 or row or anything else

Try 2 I also tried using the bootstrap-sass gem and followed this approach https://github.com/twbs/bootstrap-sass#configuration, this also did not work. I can see the slight change in the font but no grid class is working. This is what my layout looks in in second try while using the bootstrap gem

<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
  <%= wicked_pdf_stylesheet_link_tag "pdf" %>
</head>
<body>

  <div class='container-fluid'>
    <div class="row">
        <div class="col-md-6">COL 1</div>
        <div class="col-md-6">COL 2</div>
    </div>
     <%= render partial: 'employers/profiles/profile', %>
  </div>

</body>
</html>

Inside application.rb I have config.assets.precompile += ['pdf.scss']

What am i missing here?

unixmonkey commented 6 years ago

@shairyar Does using xs in place of md, like col-xs-8 work?

This issue shows there may be a known issue.

shairyar commented 6 years ago

@unixmonkey i actually got it to work by adding viewport_size: '1280x1024'

        format.pdf do
          render pdf:      "profile",
                 viewport_size: '1280x1024',
                 template: 'layouts/pdf.html.erb',
                 locals:   { :user => @user }
        end

Now everything seems to be working fine but then i had to include bootstrap via try 2 mentioned in my comment above

unixmonkey commented 6 years ago

@shairyar Great find! I always forget about that option. XVFB can sometimes be configured to run at a very low resolution.

jodeci commented 6 years ago

Adding my two cents after finally getting it to work for me. Creating a separate layout did the trick.

# controller
def show
  respond_to do |format|
    format.html
    format.pdf do
      render(
        pdf: "filename",
        layout: "pdf",
      )
    end
  end
end

# view/layout/pdf.pdf.erb
<%= stylesheet_link_tag #{bootstrap_cdn_url}, media: "all" %>

henockgm commented 5 years ago

Hi, I am having the same issue. I am using wicked_pdf in a rails project to generate pdf and I have a bootstrap grid view in the pdf template.

The bootstrap grid view renders in the pdf correctly when I run the app in development but when deployed to production no grid view in the pdf. I am using CDN link in as below

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <%= stylesheet_link_tag  "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" %>
    <%= stylesheet_link_tag  "http://fonts.googleapis.com/css?family=Fira+Sans" %>

    <title> My Site </title>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

in show.pdf.erb pdf template

I have also tried download thebootstrap.css file ans save it in app/assets and included it in config/initializers/assets.rb precompile list as

Rails.application.config.assets.precompile += [ 'bootstrap.css']

But no luck, and am still desperatrly looking for a solution.

Any suggestion is appreciated.

cesc1989 commented 5 years ago

@henockgm you mean a grid using the new CSS Grid feature or a grid using bootstrap classes?

Xavoski commented 4 years ago

I am having an issue with bootstrap and pdf. My problem is in another issue #934, because at the beginning i didn't know it was related to Bootstrap. I use Bootstrap in my Rails project. Included gem 'bootstrap' in my Gemfile and import it in my application.scss @import 'bootstrap'; and it works for my pages. When i started using Wicked_pdf, i create a new scss file for pdfs styles.scss, what i renamed to pdf.scss and imported Bootstrap like in application.scss @import 'bootstrap';. It was working fine, but after i upgrade my application to Rails 6, it stopped working, returning this error:

Failed to execute: ["/home/junior/.rbenv/versions/2.7.1/bin/wkhtmltopdf", "--encoding", "UTF-8", "--enable-local-file-access", "--page-size", "A4", "--margin-top", "30", "--margin-bottom", "10", "--margin-left", "10", "--margin-right", "10", "--header-html", "file:////tmp/wicked_header_pdf20200804-53024-66y14f.html", "--footer-html", "file:////tmp/wicked_footer_pdf20200804-53024-caf2jz.html", "file:////tmp/wicked_pdf20200804-53024-rf7hwf.html", "/tmp/wicked_pdf_generated_file20200804-53024-13qonn3.pdf"] Error: PDF could not be generated! Command Error: Loading pages (1/6) [> ] 0% [======> ] 10% [==============================> ] 50%

As you can see, there is no mention about Bootstrap in that error. But after some time and i don't know why, i removed @import 'bootstrap'; from my pdf.scss and the pdf was generated. So, if someone is using Bootstrap with Wicked_pdf and Rails 6, could let me know how do you implement it?

Xavoski commented 4 years ago

Bootstrap is being applied to my PDFs, but it is not fixed, is more like a walk around the problem. Now i have Bootstrap duplicated in my project. I have Bootstrap from gem gem 'bootstrap', which is used for *.html.erb pages. But after this way stopped working with Wicked_pdf, i needed to download Bootstrap 4 compiled files and add bootstrap.min.css to my stylesheets directory. Then i imported it @import 'bootstrap.min'; in my pdf.scss. With this i was able to use bootstrap grid system at least, what for me is great, because Wkhtmltopdf does not support default css grid system.

unixmonkey commented 4 years ago

Bootstrap has always been a pain with wkhtmltopdf as far as I know, first there's the relative @import '/path/to/whatever' imports, which need to be either transformed into full paths including hostname, or preprocessed with SASS, which turns those CSS imports into inline CSS in the output, and there's some flexbox-related issues, too from what I remember, since wkhtmltopdf uses what is equivalent to a very old version of Chrome. Which also means too-modern JS and CSS don't work well with it.

It can be made to work with some polyfills if you pretend it's like Internet explorer or something like that.

In the past, I've found it easier to hand-pick the CSS rules I need (from any CSS framework) to get the desired effect on my PDF containing pages, but perhaps in your app, you want to convert any arbitrary page, or something that could have more varied content that needs styled.

Xavoski commented 4 years ago

First of all, thanks for your work and attention, this project is very helpful.

For now i am using just row, col and w-x from bootstrap for my pdf. I use pages exclusive for PDF, but in the early past Bootstrap from gem was working, so i used it rules to style my reports. I may copy only the parts i need from the framework, to avoid complete duplication, specially because part of it doesn't work with Wkhtmltopdf.

Thanks again.

mileszs / wicked_pdf

Unable to apply bootstrap in pdf #433