Rails PDFKit Appearance Bug with Bootstrap

StackOverflow https://stackoverflow.com/questions/18666781

Question

I grab my DOM with jQuery and send an AJAX request to create the PDF:

// store html in variable
var html = '<html>' + $('html').html() + '</html>';

// create pdf
$.ajax({           
    url: '/quotes/generate_pdf', 
    data: { html : html, quote_id : quote_id },
    type: "POST",
    cache: false,           
    success: function(data) {

    },
    error: function() {
        alert('An error occurred, please refresh the page and try again');
    }   
 });

Then, in Rails:

def generate_pdf
  if request.post?  
    kit = PDFKit.new(params[:html])
    kit.stylesheets << RAILS_ROOT + '/public/stylesheets/portal/pdf.css'
    file = kit.to_file(RAILS_ROOT + '/pdfs/' + params[:quote_id] + '.pdf')
    render :text => '1'
  end
end

pdf.css is the stylesheets from my page combined into one file.

The PDF generated looks perfect except that there is some kind of grey overlay on top of it for some reason. After spending time experimenting to see what was causing it, it seems to be something within the bootstrap.css but I have no idea what so was just hoping that someone else had solved the same issue but I can't seem to find anything.

When opening the PDF it seems to be perfect for a second in Adobe Reader but then the overlay appears, so I thought it was an issue with the software but opening it in different programs has the same result and the thumbnail preview also has the overlay, plus, when I found out it was something in bootstrap then it eliminated the software being at fault.

Was it helpful?

Solution

In desperation I went to the Bootstrap Customise page (http://getbootstrap.com/customize/?id=6470483) and re-downloaded the files and used the non-minified version in my pdf.css and it seems to work fine.

I only ticked the top five check boxes in the first column:

Print media styles
Typography
Code
Grid system
Tables
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top