I have an html page with some text data and graph. I am using wkhtmltopdf gem to generate pdf from html page. Using highcharts, i am generating graph.
I am able to generate PDF successfully but PDF only contains text
data and doesn't have graph in it.
I already tried with some options as below
- plotOptions: { series: { enableMouseTracking: false, shadow: false, animation: false } }, in Hightcharts jquery coding..
Please assist me to resolve this issue.
I am not familiar w/wkhtmltopdf but I do use wkhtmltoimage to create images of pages that contain graphs from highcharts. One thing I noticed is that I had to set --javascript-delay to be several seconds long to make sure the chart had enough time to load. It seems as though wkhtmltopdf does support this option (wkhtmltopdf v0.10.0_rc2 docs). Can you see if that helps?
Here is how we call it w/a javascript delay of 3 seconds:
/bin/wkhtmltoimage --javascript-delay 3000 "http://example.com/chartPage" "/path/to/image.png"
Related
In my vue app, I'm using vue html 2 pdf to create downloadable pdf's. My problem is that the generated pdf background image is kinda blurry.
Despite digging into the package documentation and other related posts, I can't manage to get it fixed. Does anyone can think of a solution for this one?
My Vue Js component code:
<vue-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="flavourmap"
:pdf-quality="2"
:manual-pagination="true"
pdf-format="A4"
:pdf-orientation="orientation"
pdf-content-width="100%"
:image="{ type: 'jpg', quality: 1 }"
#progress="onProgress($event)"
#startPagination="hasStartedGeneration()"
#hasDownloaded="hasDownloaded($event)"
ref="html2Pdf"
>
We have a selection of user charts.
When we use the standard highcharts export facility we have layout and font size issues: half the labels are missing and the font sizes and layout are way out of size.
I have read about altering the font sizes in the export settings but when I do this we loose our custom labels, they get replaced with numbers.
The users want a WYSIWYG export.
Here is a link to a fiddle :
`https://jsfiddle.net/spencerplanton/nd8ko93y/17/`
This has been lifted from a rather complicated dynamic chart application, so apologies for any verbose/redundant code.
In the real application we populate data from AJAX calls and allow the user to swap between data sets as well as allowing the user to see the data as either Pie, Bar or Line chart using our custom buttons. Drilldowns are used as well. I have trimmed the ajax data code and replaced it with static data but left the dynamic chart type swapping code and buttons. Without that there will be no way of testing whether any hint/solution/suggestion works with different chart types and the dynamic content/labels. Producing an over simplified test set of one particular iteration could lead to a solution that only fits that one scenario.
Any help formatting the PDF export labels would be greatly appreciated.
It is because Highcharts does not detect the width of the container.
What I can suggest is to set sourceHeight and sourceWidth to bigger values.
exporting: {
enabled: true,
sourceWidth: 1200,
sourceHeight: 600
},
See the demo, now chart looks much better in the PDF.
API: https://api.highcharts.com/highcharts/exporting.sourceWidth
I am using Vue for the first time, and I can't figure out how to get my pdfs to link properly.
This is how I am storing the data in my state.js file,
{
isVideo: false,
thumbnail: require('#/assets/images/folder/image.jpg'),
link: '#/assets/pdfs/folder/download.pdf',
assetTitle: 'This is a Title',
assetCopy: 'This is copy',
isGated: false
}
When I try to link to that link variable that has the url it doesn't render it properly, and it thinks that I want the url to be sitename.com/#/assets/pdfs/folder/download.pdf. I had the same problem with the images but I fixed that by adding the require() around them, however when I try to add the require() around the pdfs it says it can't find them.
also, here is my code in the .vue file that calls the pdf and image
<a v-bind:href="asset.link" class="test" target="_blank"><img v-bind:src="asset.thumbnail" /></a>
Do any of y'all know what I need to change to make this work?
I'm using the ACF gallery field to add images into a custom post type. The problem is that in the case of one post I've added around 80 images which means that they all have to load before Masonry is triggered. I thought I'd use lazy load to load the images in as you scroll down the page but that requires for you to know the image dimensions.
I found this https://github.com/okadots/masonry-wp-lazy-load but it turns out that it isn't very secure.
Anybody have any other ideas?
You can use something like imagesLoaded (which is made by the creator of Masonry) to make sure all images are loaded before triggering Masonry.
imagesLoaded in Masonry documentation: http://masonry.desandro.com/appendix.html#imagesloaded
You can use the imagesLoaded plugin, found here: http://imagesloaded.desandro.com/ then each time an image gets loaded you can refresh the layout of the grid, it will look like this:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
each time you add more items to the grid, probably via AJAX, you'll need to execute the lines where you layout masonry
if you are having a hard time with this you can use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can have lazy load, you only specify the URLS of your images and the plugin will do the rest, you can configure how many images you want to load on each set
Using phantom JS 1.9.7 I am having issues printing my webpage to PDF.
Instead of matching the page exactly, background colors and images are stripped, as per:
How can I force browsers to print background images in CSS?
Thanks to a post on another question, here is the answer:
body {
-webkit-print-color-adjust: exact;
}
You can add the CSS style "-webkit-print-color-adjust: exact;" to the element to force print the background color and/or image.
See the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust
Odd how this is on MDN.