I created a svg element with d3.js which contains some elements now i want to export it on button click as pdf. Does someone know how to approach this?
When I draw it in a canvas I only get a blank page.
You can use the cloudformatter scripts to convert d3 svg to pdf. See http://www.cloudformatter.com/css2pdf. There are several different examples there showing svg to pdf from various charting and visualization libraries.
Get their Javascript or link to it, its jQuery so you need jQuery. You can format the <div> containing the D3 generated SVG with on line. Assuming the <div>'s id is "d3donut":
return xepOnline.Formatter.Format('d3donut', {srctype:'svg',render:'download',filename:'d3donut'});
There are several other functions to embed, convert to image format or other print formats.
The d3 specific samples are at http://www.cloudformatter.com/CSS2Pdf.SVGCharts.d3Charts
Related
For example, if I have a link like https://cultivate-newsletter-html.s3.amazonaws.com/html-mtrgr0fqddar2d1movb1qeutr0sne3mg29uuvk81 , how can I turn this to have a dark mode experience?
Currently I am rendering this in an web view on react native, and I also do have access to the actual html document.
One way I could think of would be to directly modify the css on the html document...but I am not confident that I can grab all the elements that should change to white texts on all types of html document.
I'm using react-native-htmlview to render html text this package gives a lot of customization options what I want to ask is how can I replace bullets with an image or may be a react-native-vector-icon component the library gives an option to replace bullet with a text string can I replace it with icon or image?
Any help would appreciated you may suggest some other light weight package that serve this purpose I also need please keep in mind that I want to apply styles based on the tags and my styles includes the custom font.
This SVG originated from HTML5 canvas. Which looks fine and I added images that are represented in dataurl form to avoid CORS issues.
However, when opened in chrome the image showed up fine
When opened in Adobe Illustrator, the image did not show up.
When opened with macOS preview app, the image did not show up.
I looked up SVG2 specifications for using dataURL in svg's <image> tag href attribute and they said its okay to use. So I don't understand what is causing this rendering discrepancy between different viewers.
File for reference
In short, what is the standard way to embed images into SVG.
Okay I found out it is because only Chrome supports the newer SVG2 standard href attribute on <image> element of SVG. So I just needed to replace the href with xlink:href
Even though xlink:href attribute is deprecated in SVG2. It seems the other softwares aforementioned in the question are not SVG2-compliant.
I have the following text:
<div>Answer the following <span class='title'>Question:</span><br> (a+b)<sup>2</sup>=?</div>
I want to do the following with this text:
parse it tag by tag, so that I can render each of the tag in a custom way. I could, very well, achieve that using this library: https://github.com/Thomas101/react-native-fence-html.
while parsing the superscript/subscript tags, render the content in proper fashion. This is where I'm stuck right now.
What I'm doing right now, is that I put the entire text (from start to end) in a Text component; and each span and br tags are also rendered as Text components nested within the parent Text component (the one for the div tag).
How do I render the superscript/subscript text?
Note: I did find a solution here: Superscript Text in React Native
But, creating a View inside a Text component needs the View to have fixed dimensions, and that is something not achievable.
One option would be to convert the HTML to Markdown first and then render the markdown. I believe for both of those actions there are libraries available.
I have a large PDF and I need to show it 50% reduced in size inside a div tag that is 600px 600px in size. I also need to offer the client a zoom function.
Should I use the "object" tag? But can I reduce the pdf size inside an "object"?
Is there a jquery example or anything out there?
Need help.
<div>
<object data="febrero2012.pdf" type="application/pdf" width="600px" height="600px">
alt : febrero2012.pdf
</object>
</div >
I coudn't find the way to set a default zoom level yet. If you find a way, please let me know.
No. PDFs cannot be displayed in a DIV, as they're not html or an image. You can convert the PDF to html/images on the server and display that, just like google's "quick view" function does. But in general, PDF rendering in-browser is dependent on the presence of a plugin (e.g. Adobe Reader, Chrome's built-in rendering engine notwithstanding). Plugins can't be displayed in divs, just embed/object/iframe sections.