How can I export a table generated using Knockout that will maintain the formatting?
I was using this solution (How to export html table to excel using javascript), but it does not include formatting.
As I mentioned in my comment, excelbuilderjs.com might work out for you. There are a couple of distinct downsides - one in that you can't simply turn an HTML table into an excel spreadsheet with colors and etc. It does require setup. But, in the case of where I work, we have a fairly standard color scheme and set of formatters that has been translated into a standalone set of instructions that is then included everywhere we need to construct a spreadsheet.
Based on a few simple examples of Knockout, you could probably just use the same data source to loop through and assign to EB - then just assign number formatting and date formatting as you would for an actual excel spreadsheet (i.e. $#,##0.00 for basic currency, m/d/yyyy for a basic date).
Side note - apparently some of my documentation didn't make it up.
http://excelbuilderjs.com/cookbook/formatting.html is where you can get some basic info on formatting.
Related
I currently use a local Tomcat/JSP service/webpage to get data with sql and display it on the webbrowser with plotly (locally rendered with this javascript library). I want to do more data wrangling by the user like filtering and cannot do it with sql since the sql query takes several seconds and several sql queries for one webpage would take too much time. Within JSP data filtering is quite complicated since you have to write you own filter functions like https://blog.pavelsklenar.com/using-filteredrowset-simple-example/ or http://www.java2s.com/Code/Java/Database-SQL-JDBC/FilteredRowSetDemo.htm . If you know Pythons Pandas or sql this seems too complicated.
I wonder if Zeppelin is a good solution with these steps:
Get the data directly via sql (already works) but the integrated display possibilities are nice but not sufficient for me.
A user can adjust several filters (e.g. column1 between 1 and 3 and so) using the AngularJS view (https://zeppelin.apache.org/docs/0.7.3/displaysystem/front-end-angular.html).
Read the filter ranges from the last paragraph and do data wrangling with python’s pandas with some filters and save it a new dataframe.
Use this filtered dataframe and plot the data with a local plotly.js file (I have the pure plotly JS code). In general, it could work with an %angular paragraph as Using d3.js with Apache Zeppelin (even without the code from “else”, so d3 seem to be useable within zeppelin out of the box). But I wonder
how to pass the dataframe from Python to the Angular node. According to https://zeppelin.apache.org/docs/0.7.3/displaysystem/back-end-angular.html I have to use Spark to use the variables; so it seems that I have to integrate a spark wrapping paragraph. After that do I have to write code that converts the dataframe to JSON or similar?
how to use plotly or other local javascript files? How can I specify the location?
What do you think or do you have other/better ideas?
I solved the problem by using a non interavtive (that means no javascript library like plotly or d3) by using pythons matplotlib for the plotting task.
I have successfully setup pagedown on a site I am using, but I have run into an issue when trying to edit HTML that has already been created. I would like to take a HTML chunk that was created using pagedown, convert it back to markdown and place it in the editor.
I looked around but didn't see this covered in the documentation. I took a look in the Markdown.Converter.js file to see if there was a makeMarkdown function to match the makeHTML function but I didn't see anything.
How do I go about converting HTML back to markdown for editing?
As far as I know, no, there is no existing solution that will convert html to markdown. There are a few problems that would need to be solved before that can be done, for example, representing floats, text alignment, font sizes, etc in markdown. That leaves you with two options:
Store the markdown in the database, then convert the markdown to html on the fly. This has the advantage of being able to easily edit the text and reduces the amount of data you're storing in the database.
the second option is to store both the markdown and the html in the database. This uses more disk space, however will result in less resources being used to retrieve the html because you no longer have to convert markdown to html on the fly.
Both options are viable, each with their own advantages. I usually use the first option so that i don't have duplicate data in the database, but the second option is likely easier to use because the display-system that displays the content won't be required to have a markdown processor, instead it just pulls the generated html directly from the database.
I'll likely move to the second option instead in future projects because it makes the data more portable. If you were to access the database in a different server-language, you wouldn't need a markdown processor written in that language to get the html.
I am just a newcomer developing an app with html/css/js via phonegap. I've been searching info on how to make my app be displayed in different languages and Google doesn't understand me.
So the idea is to have a button on index.html that let the user choose the language in which the app will be displayed, in this case Spanish/English, nothing strange like arabic blablabla....
So I guess that the solution must be related to transform all the text that I load in html to variables and then depending on the language selected display the correct one. I have no idea how to make this, and Im not able to find examples. So that's what Im asking for... if someone could give some code snipet to see how html variables works and how should I save user language selection...
Appreciated guys!
This can be done by internationalization (such as i18N). To do this you need separate file for each language and put all your text in it. Search Google for internationalization.
Otherwise you can look into embeding Google Translate.
This depends on the complexity of language-dependencies in the application. If you have just a handful of short texts in a strongly graphic application, you can just store the texts in JavaScript variables or, better, in properties of an object, with one object per language.
But if you expect to encounter deeper language-dependencies as well (e.g., displaying dynamically computed decimal numbers, which should be e.g. 1.5 in English and 1,5 in Spanish), then it’s probably better to use a library like Globalize.js (described in some detail in my book Going Global with JavaScript and Globalize.js). That way you could use a unified approach, writing e.g. a string using Globalize.localize('greeting') and a number using Globalize.format(x, 'n1') and a date using Globalize.format(date, 'MMM d').
I once again need to do something that sounds simple but is infact frustratingly evading me.
On my company's intranet site we have a large table of data that has a javascript filter applied to it so that managers and other interested parties can quickly locate the rows that are relevant to them. The filter I am using can be found at http://tablefilter.free.fr/ .
My issue arises when I need to have a button to export the filtered results to Excel so that the managers can access the data offline. There are many straight forward options for exporting the HTML table to excel but I have been unable to figure out how to get JUST the filtered results to export. (Note: This intranet site will only be accessed via IE)
There is a function as part of the javascript table filter, GetFilteredData(), that will grab the filtered data cells and input these into an array, i think called filteredData[]. This array is formated as such: [rowindex,[value1,value2,value3...]].
So how do I get this array into an Excel or csv file? Again, this will be accessed only by IE so activeX objects and controls are acceptable.
Also I should probably note that I cannot use server-side technologies so please limit your responses to the confines of HTML, javascript and activeX. Thanks!
FYI: DataTables has a nice plugin called TableTools which can export table to csv on client-side. It's achieved using Flash. If you are satisfied with the filter of DataTables, I think this would be a good solution.
http://www.datatables.net/extras/tabletools/
If you are using IE starting at version 8, you can use data: URLs. Just generate the URL and point the borwser there using location.href. The data in CSV can be generated by javascript and base64 encoded.
You might want to consider an approach that relies on string manipulation.
Once you have this array, you can turn it into a JSON string. Try this popular lightweight library (json2.js):
https://github.com/douglascrockford/JSON-js
Example:
text = JSON.stringify(['e', {pluribus: 'unum'}]);
// text is '["e",{"pluribus":"unum"}]'
You should have something like
var dataString = '["rowindex",["value1","value2","value3"]]'
At this point you could use some regex replacement on the string to format it to either style.
I produce a complex HTML summary report from data in a database which could be a summary of maybe 200,000 rows in the database. The user can click a link to request an Excel version.
When they do a JS script extracts the key components of the report and stuffs them into a form in a hidden iframe. This form submits to a server-side script which generates the Excel version of the report (without the graphics etc).
As the calculations for the report are complex and "costly" it makes sense not to run them again to create the Excel version as all the data is on the page already. Also the user may have customised the report once it is loaded and I can use JS to pass those preferences to the form as well so the Excel doc reflects them too.
The way I am doing this is to include the following for each component of the report that transfers to a row in the Excel version. I've hijacked an HTML tag that isn't otherwise used.
<code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>
The code element above is a summary of the row below in the HTML report which becomes one row in the Excel doc and includes the label and various data elements. There may be a thousand or more such elements in one report.
As the data contains text I've had to use something like }{ as a field separator as this is unlikely to occur in any real text in the report. I have code set to display:none in the CSS.
When the user wants an Excel version of their report the JS code searches the HTML for any <code> elements and puts their className and innerHTML in the form. The className indicates how to format the row in Excel and the data is then put into adjacent cells on the Excel row.
The HTML report shows one percentage base (they can toggle between them) but the user preference when requesting an Excel version was to include both.
Is there a better way of doing this?
(As this is a part of a complex web app no user is going to turn CSS off or lack javascript or they wouldn't get this far)
ADDED: I can't use HTML5 as the users are corporates often on older browsers like IE6
Use the new data- attributes
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
<div data-row="[["Musicals",40,28.6,6], ...]">
The div could be the TD tag or TR tag or any other relevant tag already related to the row and the " is the escaped ".
That makes the data hidden from view and also ensures that there will come standard solutions to process the data.
Also for encoding data I would suggest using JSON as that is also a standard that is easy to use.
Standard solutions:
1) Use a Javascript data block:
<script>
var mydata = {
'Musicals': ['6','40%','28.6%'],
"That's Life": ['2','13.2%','0.5%'],
...etc....
}
</script>
2) Use element attributes:
(see http://ejohn.org/blog/html-5-data-attributes/ for more info)
<div class='my_data_row' data-name='Musicals' data-col1='6' data-col2='40%' data-col3='26.6%'>
...and then use Javascript to load the attributes as required.
This second option would be used when the data is related to the element in question. You wouldn't normally want to use this for data that's going to be used elsewhere; I would say that in your case, the simple Javascript data block would be a far better solution.
If you do go with the data attributes as per the second option, note the use of the 'data-' prefix on the attributes. This is an HTML5 specification that keeps user-defined attributes separate from normal HTML ones. See the linked page for more info on that.
You could try the new html5 feature localStorage instead of using hidden html fields, that is if you're sure that your users use only latest modern browsers.
Anyway, an improvement on your code would be to actually store the data in JSON format:
Instead of
Musicals}{40%}{28.6%}{6
you would use something like
{
"label": "Musicals",
"percentage1": 40,
"percentage2": 28.6,
"otherLabel": 6
}
This way you can build javascript objects just by evaluating (eval) or parsing (JSON.parse) the innerHTML of the hidden element, in a faster way than you interpret your own curly brackets protocol.
My point to solve that in a better way would be take these results and save in some temporal XML file in the server, show the contents in the browser and when the user request for the Excel version, you only need to take the temporal XML.
Take a look to Linq-to-XML, because its fluent-style programming would help you in reading the XML file in few lines and then creating such Excel file.
Another solution would be serialize your object collection to JSON and deserialize them with the DataContractJsonSerializer. That would make the size of temp file smaller than XML approach.