I am using 'recharts' to create graphs for my project,
and 'react-pdf' for generating a report.
'Recharts' creates a svg on the DOM when using it and a graph is displayed.
Is there a way I can use these two together, and add my 'recharts' component to my report via react-pdf?
for example - inside a <Document/> tag.
react-pdf link to website
recharts link to website
I have seen a solution which offers to convert the rechart's svg to a png, save it locally and then import it and use via <Image/> component in react-pdf.
Looking for a more straightforward approach to this issue.
Here is how I solved it :
I have used this article -
https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf
It recommends using html-to-image package.
So I've given an id to the container of the rechart component,
and selected it with docoument.getElementById().
Then, used the selected id when querying html-to-image, like so -
const response = await htmlToImage.toPng(myId);
The response then contained a url,
which was used as an src for the react-pdf Image component.
Related
I want to make a larger image display when ever the thumbnail is clicked, having problem at the point of importing the pictures from folder into javaScript or selecting it using the DOM tree structure.
I have tried to use jQuery to import it but am not familiar with jQuery, also tried to use the DOM tree structure but couldn't get it.
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.
Using NativeScript + VueJS, I'm trying to find a way to take a dynamic template that's rendered based on props and route data, and tap a button to save the "view" as a PDF to the filesystem.
I found this tutorial here which gives me a start: https://medium.com/#kumarandena/pdf-generation-in-nativescript-using-javascript-libraries-864ecf4e9a3a
This generates a Base64 which you then copy to clipboard and open in a browser. In iOS for example if I choose to save the page as a file it's just unknown.pdf. So my goal is to reference an html element, like a div, and save all the contents exactly as they appear into a folder of my choice in the native file system.
There's little to find on this so wondering if someone has accomplished this.
I use domtoimage to convert any dom element to an image, and it works well. Then you can probably insert that image to a pdf using jsPDF or pdfMake.
I see in the pdfMake playground that you can insert an image with a dataurl format.
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!
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.