wicked-pdf not rendering pdf correctly. show_html looks fine, pdf downloaded looks awfulAdding metadata to PDF generated using Wicked PDFSVG's not rendering when creating PDFs with wicked-pdfMixed orientations in wicked pdfWicked PDF font sizeRender Dragonfly images in PDF using wicked-pdfWicked pdf not rendering footerrender dynamic HTML with wicked pdfWicked Pdf not generating on server. It worls on local fineWicked PDF and Javascript loadingWicked PDF title shows correctly locally but not on the server
Why are electrically insulating heatsinks so rare? Is it just cost?
Why does Kotter return in Welcome Back Kotter?
Could an aircraft fly or hover using only jets of compressed air?
Did Shadowfax go to Valinor?
Are astronomers waiting to see something in an image from a gravitational lens that they've already seen in an adjacent image?
Paid for article while in US on F-1 visa?
Malcev's paper "On a class of homogeneous spaces" in English
What's the output of a record needle playing an out-of-speed record
strTok function (thread safe, supports empty tokens, doesn't change string)
Add text to same line using sed
How much RAM could one put in a typical 80386 setup?
A newer friend of my brother's gave him a load of baseball cards that are supposedly extremely valuable. Is this a scam?
If human space travel is limited by the G force vulnerability, is there a way to counter G forces?
Is there a name for fork-protected pieces?
How can I prevent hyper evolved versions of regular creatures from wiping out their cousins?
Languages that we cannot (dis)prove to be Context-Free
Is it unprofessional to ask if a job posting on GlassDoor is real?
How is the claim "I am in New York only if I am in America" the same as "If I am in New York, then I am in America?
Find the result of this dual key cipher
Why do I get two different answers for this counting problem?
LWC SFDX source push error TypeError: LWC1009: decl.moveTo is not a function
Theorems that impeded progress
How is it possible to have an ability score that is less than 3?
RSA: Danger of using p to create q
wicked-pdf not rendering pdf correctly. show_html looks fine, pdf downloaded looks awful
Adding metadata to PDF generated using Wicked PDFSVG's not rendering when creating PDFs with wicked-pdfMixed orientations in wicked pdfWicked PDF font sizeRender Dragonfly images in PDF using wicked-pdfWicked pdf not rendering footerrender dynamic HTML with wicked pdfWicked Pdf not generating on server. It worls on local fineWicked PDF and Javascript loadingWicked PDF title shows correctly locally but not on the server
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
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
Here is the pdf layout:
<!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
asked Mar 21 at 23:03
AndreaAndrea
947
add a comment |
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
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
Here is the pdf layout:
<!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
asked Mar 21 at 23:03
AndreaAndrea
947
add a comment |
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
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
Here is the pdf layout:
<!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
asked Mar 21 at 23:03
AndreaAndrea
947
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
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
Here is the pdf layout:
<!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
ruby-on-rails pdf wicked-pdf
asked Mar 21 at 23:03
AndreaAndrea
947
asked Mar 21 at 23:03
AndreaAndrea
947
edited Mar 21 at 23:08
Andrea
asked Mar 21 at 23:03
AndreaAndrea
947
asked Mar 21 at 23:03
AndreaAndrea
947
asked Mar 21 at 23:03
AndreaAndrea
947
947
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55290507%2fwicked-pdf-not-rendering-pdf-correctly-show-html-looks-fine-pdf-downloaded-loo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
add a comment |
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
add a comment |
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
answered Mar 25 at 23:07
UnixmonkeyUnixmonkey
15.3k44260
15.3k44260
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
add a comment |
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
Thanks. I ended up going that route. I did try to strip everything out and leave just the js for the charts themselves, but even that didn't work. I ended up having to render the page as html, create images of the graphs once they completed drawing, and then exporting a different pdf template with the images of the graphs and no javascript dependencies. It added a lot of additional steps and checks, but I was not able to figure out a different way around this. I tested with multiple different versions of charts.js as well as multiple different parameters with no luck.
– Andrea
Mar 28 at 20:06
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea That's a clever way around it, certainly. I've had reports of people needing to downgrade chart.js here: github.com/mileszs/wicked_pdf/issues/713
– Unixmonkey
Mar 28 at 22:39
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
@Andrea Also, if you are pulling data via AJAX, the content-security-policy or relative routes might be getting in the way since it's rendered from a file on-disk.
– Unixmonkey
Mar 28 at 22:50
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
Thanks. I tried downgrading but that didn't help. I wasn't pulling content via Ajax for the charts themselves, but I was having to pass data as data-variables from the backend into js so that could very well be it.
– Andrea
Mar 29 at 22:19
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55290507%2fwicked-pdf-not-rendering-pdf-correctly-show-html-looks-fine-pdf-downloaded-loo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
