I´m building some ReactJS Table and Report components tha basically will contain <table> data, some graphics (d3) and some textual data. I need to provide 3 buttons:
Export to PDF
Export to Excel
Print
Are there any trustable packages available for the tasks above using ReactJS ? What is the approach to handle these requirements ?
I would use a combination of the following JavaScript libraries:
React Csv is my favourite JavaScript library for working with csv. It excels at dynamic generation.
PDF Make is my favourite JavaScript library for generating PDFs.
Note: I would attach the files to this post, but there is currently no facility for this in StackOverflow.
react-pdf (published 16 days ago - not tested)
react-export-excel (published 8 months ago - not tested)
For printing, put window.print() in your code
Example:
Copy and paste this as .html (in React, it would be onClick={window.print()} ... If I'm correct)
<!Doctype html>
<html>
<body>
<p>Use the button below to print</p>
<button id="print" onclick="window.print()">Print</button>
</body>
</html>
Old question, but since I was looking for something similar, I ended up using :
jspdf (see specific issue for reactjs)
react-excel-workbook
nothing yet, feel free to update the answer if you have.
Related
guys
I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.
I'm using ACE editor.
This is what I get while trying with autocompletion.
I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.
What I want is this.
In this pic as you can see I'm getting suggetion related to os package only.
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
Reference: https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
HTML, JS, CSS Based
Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
Create <script> </script>
Build the autocomplete
Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...
E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.
I know, this is only an plan how to do is.
I have two html tables(containing dynamic content stored in variables) along with headings and paragraphs. When the user clicks the download PDF button, he/she should be able to download one PDF of two pages containing the two tables.
I have read a lot of articles but I found no definite answer to this issue.Should I use jspdf or react-pdf for this scenario?
I am using react frontend and Nodejs backend.
https://github.com/MrRio/jsPDF
JSPDF is a perfect solution for converting tables into PDF in client-side. But if you want to do something from backend
Or you can refer to
https://www.npmjs.com/package/html-pdf
for rendering it in the backend, and make express download it.
Looks like you can call the window.print() method in componentDidMount() to print the complete div, though removing the footer through the script can be a challenge.
Using html2canvas with jspdf has a major drawback that the pdfs are blurred and their clarity varies with the page zoom, as it takes the screenshot of that portion. Hence, you must configure it correctly or compromise on quality.
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
I am creating an ASP.NET web application. In one of my webpages (an ASCX control) I am placing a fusion chart inside a <div> tag. I want to provide an option for the client to download this fusion chart.
Is there any way that I can download
the fusion chart present in the Div
tag, as an image (Using javascript
because the div tag is a client side
control).
The request is that my client could save this fusion chart present in the <div> tag as an image when he visits the webpage.
The target browser is IE.
Please help me.
I can confirm that it is not possible to 'Export the chart as image' when using FusionCharts Free. However, as mentioned by Larsenal, you will be able to use FusionCharts v3.2.1 and it's updated JavaScript API to export pure JavaScript charts to JPEG, PNG, PDF, SVG formats.
Ref.- http://www.fusioncharts.com/docs/?ECPureJS.html
Furthermore, you may even export your Flash charts, if required, in a similar manner. DO check out the link below for a more detailed account of the same.
Ref.- http://www.fusioncharts.com/docs/?ECOverview.html
Hope this helps.
It is currently not possible to generate an image from a section of a webpage with JavaScript. Quoting myself from another question:
Firefox added something similar to
this to their canvas implementation.
You can find
CanvasRenderingContext2D.drawWindow()
documented in their wiki. It is
restricted to being used by plugins,
for security purposes, and isn't
supported by any other browsers.
There is
talk
of adding support to other browsers,
and perhaps removing some of the
security restrictions, but that is
probably a long way off. For now,
there isn't a good JavaScript solution
to your problem.
Sorry, there's no way to do it with Javascript.
I don't know about the Fusion controls, but some graphing libraries include a way to render to an image or PDF. Start looking there, not Javascript.
Update: FusionCharts claims to have the ability to export to JPG, PNG, PDF and CSV. Start with this page about exporting pure JS charts in their documentation.
It seems that when you copy something from a web browser to the clipboard, at least 2 things are stored:
Plain text
HTML source code
Then it is up to the software that you are pasting into can determine which one it wants.
When pasting into MS Excel 2003, you have a paste special option to paste HTML, which will paste the formatted HTML (as it is displayed by the browser).
What I want to do is paste the actual source code as plain text. Can this be fetched from the clipboard in VBA?
Edit I'm trying to access all the source-code of the copied HTML, including the tags.
This time I've read the question properly and realised coonj wants to get the HTML from the clipboard including tags.
I believe this is reasonably difficult. You need to read the clipboard using Windows API calls. And then, parse the resulting CF_HTML string which has some wacky headers added on top of the HTML.
Microsoft Knowledge Base article with Windows API code to read the CF_HTML from the clipboard (function GetHTMLClipboard).
You will then probably want to ignore the wacky headers. Microsoft documents the format here. An example CF_HTML fragment is shown below. You could probably come up with some guesswork method of skipping the first few lines.
Version:0.9
StartHTML:71
EndHTML:170
StartFragment:140
EndFragment:160
StartSelection:140
EndSelection:160
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>The HTML Clipboard</TITLE>
<BASE HREF="http://sample/specs">
</HEAD>
<BODY>
<!--StartFragment --> <P>The Fragment</P>
<!--EndFragment -->
</BODY>
</HTML>
It might also be worth thinking whether there's any other way of solving your problem. E,g, Will the browser always be Internet Explorer? Can you get what you need by walking the HTML tree using the COM object model?
EDIT: coonj has tried this now and says "the GetHTMLClipboard function seems to work with both Firefox and IE, and it doesn't look like it is throwing those headers in there"
VB6 has the Clipboard object that allows you to get the clipboard data in different formats. VBA doesn't have this object. But there are windows API calls you can use. You can see a sample implementation for VBA here.