I have been trying to sort out an issue with printing certain areas of a web app i am working on. The issue is with highcharts js which renders its bar charts as <rect ... />.
On calling the window.print() on load the print call acts just like the background image issue where the background image/colour always disappear. However, when i print the page from the browser menu its displaying as it should be. Any idea why it won't print <rect /> ?
Might be a timing problem. Try something like
window.onload = function() {
window.focus();
window.print();
}
You cannot print SVG from all browsers and from the ones you can, the svg needs to have rendered before you try to print it.
I read here an alternative
From version 2.0 an exporting module
is available for Highcharts, which
allows users to download images or
PDF's of your charts. This module
consists of an extra JavaScript file,
exporting.js, and a web service or
server module written in PHP.
Highslide Software offers the
exporting web service free of charge.
If you include the exporting module in
your charts, two buttons will appear
in the upper right. One button prints
the chart, which is done on the client
side only. The other button handles
exporting. By default, an SVG
representation of the chart is sent by
POST to http://export.highcharts.com,
where it is converted using Apache's
Batik converter to PDF, PNG or JPEG.
Related
I try to understand if I could use PhantomJS (or any similar js library) in my web application (in a javascript function called when "ExportToPdf button is hit) to create pdf export of a part of the user's current page, for example the contents of a div, but with its current styles.
And I need it to be made on client side.
I see over my searches that phantomJS is used as a tool (console app executable), but could I utilize it the way I need it?
Maybe in combination with jsPDF or some similar js library...
Or if you have any other solution to suggest... I already have tried jsPDF alone and it does not get any styles at all (all bootstrap class elements are missing). Also I tried html2canvas+jsPDF to get image of the desired div contents and put it on a pdf doc, but this does not seem to get all the height of the div (only the part that is viewable in browser gets exported)
I have a fairly large AngularJS app. I've integrated PDF.JS simpleviewer.html code from the examples folder inside my app(didn't modify it). When I use PDF.JS to render a single page within the container(not iframed), I get very inconsistent text rendering:
Original
Inconsistent boldness
Inconsistent fonts
When I use the same pdf file with the examples code outside of my app, it always renders correctly. It's only when I integrate simpleviewer.html inside my app (not modifying a single line), that this issue appears.
Can you suggest what might be the root cause for it. Which areas should I look for conflicts?
I figured that if I have multiple instances of the viewer on that same page, they will try to render pdfs all at the same time -> this causing the bad rendering of text. If there is just one instance, text renders fine.
When using LaTeX one can include a PDF as an image (this is usually done, e.g., with scientific papers, in which one can include a graph in PDF, so that it can be shown properly at different scales).
By using some tools like remark and MathJax one can create web pages with some LaTeX insertion.
Now, suppose I am interested in including a PDF as an image, as I usually do with plain LaTeX files.
I have tried to include my PDF using the <img> tag, and everything was working, since I realized that this only works in Safari (since Safari considers PDFs as images too). This consequently does not work in other browsers, as Chrome / Firefox.
So, I tried to include the image with an <embed> tag, as shown here. However, what I obtain is a mini-PDF viewer inside the browser, with a grey frame all around the image I am including. I would instead like to include just the image, with no frames.
Is there a way of reproducing this behavior?
Thank you in advance.
I dont know what type of framework or cms you use for your Homepage. But i guess you have to use sth like "imagemagick" to render your pdf files, like its done in wordpress or other cms systems.
I am generating a graph and html table with graph related info in a collapsible div.
Now the problem is I need to add the div content to my PDF export and not just the Graph, I see that there is a chart.exportDivElements but I could not find a related sample on how to use it.
Anybody has an idea about this? or an alternate to export highchart and a specific div to PDF via javascript?
I implemented the export server and saved the svg file (did away with the convert to jpg/png code as was not needed) to the server and used tcpdf to generate PDF with svg and required content, it was a bit hard to understand how to export server worked by got my head around and worked very well.
You can't. The export server exports the chart SVG, not any arbitrary html content of the page. A possible solution is to the alter the export server and introduce an extra POST parameter 'customHtml'. In the phantomJS script you have to detect if the parameter is set and write the tablecontent to the page before it is rendered.
I am dealing with an application which is using a lot of graphics (the library Raphael and graphdracula). Basically, the application is drawing different graphs. Let's say that we have 3 pages which are drawing graphs:
graph1
graph2
graph3
Let's say we have the following URL:
www.someurl.com/graph1
Now, this URL is going to load the page and the drawing algorithm for graph1. The way my application works now is: if I want to change the layout (say, to graph2), I will have to reload a whole page:
www.someurl.com/graph2
What I want to do is: to make this as a Single Page Application (SPA). When we load the application, I want all the graphs to be loaded, but only one to be visible (I guess this is the way to do it). When I click a button, just to load the stuff I need, not the whole page. Something like, when we open the application's page about graphs, to be:
www.someurl.com/graph#1 -> for the first graph
www.someurl.com/graph#2 -> for the second graph
www.someurl.com/graph#3 -> for the third graph
I want to this asynchronous. I tried to find something for Flask, but without sucess. Can someone please point me into the right direction how should I do this?
Thanks in advance!
If that's not critical for you to support IE<10 - instead of old-style #hash-navigation, you can use jquery-pjax plugin to load page part by AJAX: https://github.com/defunkt/jquery-pjax
On Flask side - you will have to differ AJAX-requests by their headers or by some additional param like &ajax=1.
See also this question with comparison to history.js : jQuery-pjax vs history.js to load specific content when clicked