AngularJS ui-grid import XLSX data best approach - xlsx

What would be the best approach to import XLSX data to be displayed using an AngularJS ui-grid?
Is the js-xlsx parser a good choice for this, or are there other open source XLSX parser tools better suited for this task? In my case the XLSX data is very basic, nothing complicated, but I would like to preserve the style info as much as possible. I anticipate the the data grid will be less than 20 col x 1000 rows.
Or would it be better to use an alternative data grid, such as the Hansontable, instead of ui-grid? Would that be better suited for spreadsheet data?

Importing data into the grid with js-xlsx should work fine. I've been able to get it working with my simple Open Office files so I would imagine you will be mostly OK.
Style info is another question, though. If you're wanting to maintain cell-specific backgrounds and such that could be more difficult. Can you share your specific use case that you want to handle?
For others who might be interested: once you've read a file into your browser and turned it into a workbook you can use XLSX.utils.sheet_to_json() to easily dump the spreadsheet contents into a structure you can pass into your grid. If you pass { header: 1 } as an argument to that function it will return a simple array-of-arrays of the data. The first element in the array will be your header row if you have one. You can use that to create your column definitions.
If you want to see a working plunker check this one out: http://plnkr.co/edit/rYC3nd7undqJz2mr8Old?p=preview
And if you want a more in-depth tutorial I have this post explaining SheetJS and the contents of the plunker: http://brianhann.com/easily-import-spreadsheets-into-ui-grid/

Related

Interpolating custom data onto a PDF

I am building an Angular test preparation app (with Laravel 5.1 API). One of the requirements is to allow the user to print a certificate of achievement.
The client wants the person's name and credentials interpolated into the document (e.g., highlighted below). Here is a snapshot of the PDF template they sent:
The way I'm handling PDF viewing is simply by storing the file on S3 and giving them a link to that file.
Interpolating information into a PDF doc doesn't seem trivial and I haven't found much information on programmatically allowing this, but there are tools like DocHub, that allow you do edit while viewing the PDF.
I'm interested in learning:
is doing this programmatically trivial?
are there 3rd party tools I'm unaware of?
would I even be able to send this information along to the S3 link to interpolate in the first place?
Using PDF as a format for editing is usually a bad choice. If you have a form with fixed fields, then it's easy. Create a PDF template with an interactive form. In this form, based on AcroForm technology, you'll define fields with fixed coordinates, and a fixed size. You can then add content to these fields.
One major disadvantage with this approach is the lack of flexibility. Did you notice that I used the word "fixed" three times in the previous paragraph? If text doesn't fit the predefined field, you're out of luck. If the field is overdimensioned, you'll end up with plenty of white space. This approach is great if you can predict what the data will be like. A typical use case is a ticket or a voucher. For instance: the empty form is a really nice page, with only a couple of fields where an automated system can put a name, a date, a time, and a seat number.
This isn't the best approach for the example you show in your screen shot. The position of every line of text, every word, every character is known in advance. If you want to replace a short word with a long word (or vice-versa), then all those positions (of each line, of the complete page, possibly of the complete document) need to be recalculated. That's madness. Only people with very poor design skills come up with such an idea.
A better idea, is to store the template as HTML. See for instance chapter 5 of iText's pdfHTML tutorial, where we have this snippet of HTML:
<html>
<head>
<title>Invitation to SXSW 2018</title>
</head>
<body>
<u><b>Re: Invitation</b></u>
<br>
<p>Dear <name>SXSW visitor</name>,
we hope you had a great SXSW film festival experience last year.
And we would like to invite you to the next edition of SXSW Film
that takes place from March 9 until March 17, 2018.</p>
<p>Sincerely,<br>
The SXSW crew<br>
<date>August 4, 2017</date></p>
</body>
</html>
Actually, it's not really HTML, because the <name> tag and the <date> tag don't exist in HTML. All HTML processors (browsers as well as pdfHTML) ignore those tags and treat their content as if the tag was a <span>:
It doesn't make much sense to have such tags in the context of pure HTML, but it does make a lot of sense in the case of pdfHTML. With pdfHTMLL, you can configure custom tags, and have a result that looks like the PDFs shown below:
Look at the document for "John Doe" and compare it with the document for "Bruno Lowagie". The name "John Doe" is much shorter than my name, hence more words fit on that first line. The text flows nicely (we could also have chosen to justify the text on both sides). This "flow" is impossible to achieve with your approach, because you will never get a PDF template to reflow nicely.
OK, I get it, you probably say, but what about the practical aspects? You talk about a Java / .Net library, but I am working with Laravel and Angular.js. First, let me tell you that I don't think you'll find any good PDF tools for Laravel or Angular.js, because of the nature of PDF and those development environments (in my opinion, those technologies don't play well together). Regardless of my opinion, this shouldn't be much of a problem for you because you work in an Amazon environment. AWS supports Java, and the Java code needed to get pdfHTML working is minimal. Most of the code samples I wrote for the pdfHTML tutorial are shorter than 15 lines. So why not try Java and pdfHTML?
If you're already using Amazon services, why not use an amazon lambda function, in combination with iText7 (java), to generate the pdf on demand?
That way, you are guaranteed that the pdf is correct, and has nice layout every time.
Generating the pdf can either be done by:
converting HTML,
programmatically creating your entire document,
filling and flattening an XFA form.
I think for your use-case, either option 1 or 2 are the most sustainable.

How to make drill down tables in Zeppelin?

I am trying to make each value in one of the column of table as clickable so that I can develop drill down functionality using Zeppelin Table. But following sample code is not working at all.
print(s"""%table
a\tb\n%html <button>x</button>1\t2\n%html <button>y</button>3\t4
""")
It will take quite some effort to make this work.
The basic idea is converting a data source (e.g. Spark DataFrame) to a complete and self contained HTML section and which is interpreted by Zeppelin. Hide and show need to be handled by javascript library.
Zeppelin using Bootstrap, so we shall use bootstrap library directly. This SO might help Bootstrap cllapse. Perhaps need more styling.
If you are just wanna drilldown function while not strictly with table. And if you are using Spark, it might be a bit easy with spark-highcharts to implement the feature like Highcharts column drill down
Finally my code worked. The issue seems to be if you have html tag in the first column, it will not work. However, it works in all the other columns. Just add one more cols in the front and it worked.
print(s"""%table
dummy\ta\tb\np1\t%html <button>x</button>1\t2\np1\t%html <button>y</button>3\t4
""")

Finding an solution on Views?

Hi everyone I am developing an website and I wanna use one block similarly to this link https://careers.mit.edu/#block-views-facts-block.
Which it contains the flowing text and i liked it by the way so i wanna do it similar to this.
Would be grateful if any one suggest me the right way to do it.
they are using Drupal Views to output a text blocks, after custom animate function in JS/JQuery
check this file
https://careers.mit.edu/sites/default/files/js_injector/js_injector_2.js
Drupal.Careers.scrolling_text_animate
and few more to handle text position ...
animate function is quite big, you can do similar or look for an JQ plugin

Implementing copy-paste directive in my table using Angularjs directive

I am displaying some data in tabular format. I am trying to add the ability to copy contents of one cell and paste into another. i know I have to do something like
element.on('ctrl-c',function(e){
$scope.textToBeCopied = element.innerHTML;
})
and then let the cursor move to the relevant position and implement a similar paste function.
Those with knowhow of how to implement this feature kindly advice.
I have a plnkr here:
http://plnkr.co/edit/YyZLVKtRAR1OYGey0FYj
figured it out.
Those who wanna take a look or offer a better solution please see the plnkr.co here
http://plnkr.co/edit/YyZLVKtRAR1OYGey0FYj
Focus on the file copyOn.js
This is where I have defined the copy-paste directive

Open/Libre Office drag and drop MIME types

Does OpenOffice or LibreOffice support any mime types which allow direct pasting/drag'n'drop of tabular data? I have implemented CSV drag and drop, but since my source data is already tabular, I'd like my users to not have to navigate the import screen that comes up with CSV.
I had exactly the same problem.
The solution is really stupid, and it cost me hours.
Instead of formatting you csv table to:
One\tTwo\tThree\n
Four\tFive\tSix\n
Use the \r character instead on \n as:
One\tTwo\tThree\r
Four\tFive\tSix\r
The mimetype you have to use is "text/plain"
I tried dragging some cells from one OOo Calc window to another, and it maintains the tabular structure of my data, which suggests it does allow such things (but doesn't prove it: it could be doing something special behind the scenes).
(I thought there used to be a program to list the mime-types that a drag contained, but I can't find one today.)
On a whim, I tried dragging a simple <table> from my web browser to OOo Calc, and it appeared there as a table, with no import screen. Based on this, I think that OOo sees a single <table> in a text/html data drop as something it knows how to put into cells.
I don't know if that's the best way but it seems to work!

Resources