How add custom content HighCharts PDF export? - javascript

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.

Related

How to make a pdf file out of html using html2pdf in vue3js?

I am trying to convert my html into .pdf with the use of html2pdf.
I have no problems when it is a simple one file component with html and a <button> inside <template> and all the methods are inside this file, like below:
<template>
<div ref="pdf">
Hello, this is my awesome html converted into pdf
</div>
<button #click="generatePDF">
make PDF
</button>
</template>
<script>
import html2pdf from "html2pdf.js"
export default {
methods: {
generatePDF() {
const doc = this.$refs.pdf
html2pdf(doc)
},
},
}
</script>
<style></style>
The problem is, that the solution above takes space in the DOM. So everything is visible to the user, which I would like to avoid.
Also, a parent-child relationship is a no-go (like I export the button to a parent component) because the whole html can still be seen. If I would use v-if or v-show, then I get a blank pdf file.
Questions:
How can I make a pdf file while the html is not seen by the user?
Would like to take information (html) from different components and merge them into one pdf file. How is this possible?
I ran into similar issue with Angular long time back. What I have observe
How can I make a pdf file while the html is not seen by the user?
This can not be possible, because html2pdf uses canvas, that is created by html2pdf on the fly.
Would like to take information (html) from different components and merge them into one pdf file. How is this possible?
html2pdf is very limited in functionality, it is not rich as we need. This also doesn't possible.
After spending a week, I switched to JSpdf, that is much capable of doing these functionality.
It will be one time setup, once you create the format and template, it will be easy and more flexible.

How to create pdf export of a part of the current page on the client side

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)

Exporting image into excel in javascript

I want to export my html page into excell sheet which contains some svg charts and html tables. I searched a lot and couldn't find any solution in javascript. I could find a php solution in this. Only thing i found is a node module(here) which i think cannot be used in a web page js file.
Finally got a solution for inserting image into excel in Excelbuilder.js.
We can insert image by specifying cell or offset positions using this plugin. It works.

ng-grid to PDF using jsPDF or other library?

Hi I have an AngularJS ng-grid.
I am trying to find a way to use jsPDF to render it as a PDF. I have successfully managed to render PDFs of simple text and complicated SVGs via their URI...however when I try to create an image from the ng-grid the image fails, and when I try to use the jsPDF plugin for fromHtml it takes away all the CSS even though I explicitly add it back in.
Any suggestions?
Here are some related posts but they are not angularJS specific:
Export HTML table to pdf using jspdf
Export HTML table to pdf using jspdf
I tried doing the exact same thing as the second post and I get all of my data in a long list since angularJS doesn't uses standard tr and tds to make tables...it just a lot of divs with CSS.
jsPDF worked well after I made my own version of ng-grid-pdf-export.js to use POINTS rather than MM in the calls for the definition of table info. Otherwise, the row spacing was much too large!

Generate pdf from HTML and SVG

I have some SVG element in my HTML page with some HTML controls. I want to export all in a pdf. The export need to be "correct", I can't, for example, create a picture and create a pdf from it. And the html text need to keep this format, it have to stay selectionnable.
I saw jspdf but it seems hard with SVGs.
So, have you got an idea to do this?
Just for information I work with Phonegap / Angular js on mobile platforms.

Categories