Printing From Aurelia Application

I’ve added a Print button since application businesses still like to print documents such as quotations that have been saved as temporary PDF files in the exact format required by the application. Does anyone know how I can get this to work in Aurelia? I cannot find anything describing how to do this using TypeScript in Aurelia. There is no printing support whatsoever in Net Core and RAW print is a non starter. There are plenty of options in MVC using pure JavaScript but cannot get these to work. I could use a window.print() to force the operating system printer dialog to appear and use it to print but the results are too poor for business use. There are commercial solutions available but would be preferable to use open source. It seems printing is now a niche area (and therefore need to pay for software) though more paper seems to be used than ever before :slight_smile:

image

It seems that e.g. JSPDF allows to generate PDF from HTML, see the first answer to this Stackoverflow question: https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript

Afraid I’m not a fan of jsPDF. I tried it a while back since nobody uses HTML without CSS in serious web software and first thing I found was a Stackoverflow answer that stated jsPDF does not work with CSS but it can work along with html2canvas. You can use jsPDF along with html2canvas. My first thoughts were how long does it take to configure and get working for a simple case, next a complex case, then hopefully most things in between. wkhtmltopdf seemed a better option at the time. The fewer lines of code that need to be written to get something working the better. For example, a button is one line of HTML, the CSS is defined as links in the HTML, so a PDF converter just needs the HTML (could be a long single line) and a configured directory containing the CSS files to work! Similarly for printing, I don’t wish to add in what Microsoft decided we are not going to have in Net Core

What is the problem with standard printing? You can have print only CSS and have a completely different layout and format for printing.

There are other open source solutions to pdf generation but your just going to have to lay everything out again. The only reason I’d ever generate a pdf is if the customer wants to download a pdf!

I hardly ever use a printer (hence the original question) however application users often request suitable printing functionality for productivity reasons. For example, users may want hard copy of what they see on screen and a Print button whose action is to send a formatted copy of what they see on screen with no further user actions at the computer as the desired result until they wish to print another page. The intention would be not to save anything permanently as if another copy was required going back to said page and clicking Print again gets the machine to repeat getting data from database, rendering page, etc which is what it is good at doing fast. They certainly do not want to go looking through a disk/network share or whatever to find the right file and manually sent to printer which is relatively slow possibly affecting productivity as they could lose their place finding and printing. So when the same HTML template (and CSS) is used, as here, to generate a view in Aurelia or a PDF document destined for printer there is no need to have multiple media CSS files hence less code to write (CSS is code) and less to go wrong.

As long as you display a pdf, either in new page, or in iframe, browser will supply a pdf viewer and print button in the viewer.

There is a very old blog post about an Aurelia implementation which you can find here. I’m pretty sure, given it’s age, lot’s of things aren’t as accurate anymore, but still it might give you an idea of how to approach the topic.

It would be nice to have for legacy PDF documents as well as those created on the fly from HTML and CSS from Aurelia view models and user interactions. For example (https://stackoverflow.com/questions/24535799/pdf-js-and-viewer-js-pass-a-stream-or-blob-to-the-viewer).

If you want to generate PDFs, it might also be worth looking at pdfkit.

We found the most foolproof/future-proof way was to create the pdf on the server. We just render it to a memory stream - using iTextSharp I think as we’re using asp.net - then send it back to the client. Works fine - only issue we really had was rendering large tables to the pdf takes a long time, and sometimes formatting or inserting graphics can be problematic.

I have no problem actually generating PDFs. It is rendering them on demand on the client in an Aurelia view model that is proving rather difficult. I agree it is impossible to deal with files that are saved on the client for security reasons so cannot save files with the same name foe example. Cannot even find out what the file name is after saving to bind to a TypeScript variable. How can a PDF file on the server be rendered without saving on the client? iTextSharp is no use to us since it does not work with Net Core so I’m experimenting using the following HTML which nicely displays printable dialog when the pdf file has been saved (see below). However it does not display anything if the file is being created at the same time effectively needing the route to be selected twice. Ideally I would want the 64 bit string to be rendered as PDF (or converted to byte[] or whatever else needs to be done). I certainly do not wish to create a browse button and make the user find the pdf search the local machine to find the files before viewing and printing. Surely somebody knows how to do this without fuss and can share some javascript/typescript code. I am feeling at witts end…

At long last figured out after a long session. There is no need to save any files at all either on client or server. If any one else has the problem the working HTML is shown below. Putting this to bed…

2 Likes

Can you please share the code that generates pdf from Aurelia view?

1 Like

I’ve just come across this post. I’ve been driving myself nuts trying to do the same thing.

Unfortunately, the image you posted cuts off the interesting bit - namely the link for plugsinpage.

Could you possibly let me have the full html for the tag?

Many thanks

1 Like

Probably this:

http://www.adobe.com/products/acrobat/readstep2.html

see: https://stackoverflow.com/questions/14690000/how-to-embed-a-pdf

1 Like

Thanks very much.

I ended up with

  <div if.bind="fileContents" class="embed-responsive embed-responsive-1by1">
    <embed src="data:application/pdf;base64, ${fileContents}" type.bind="type" alt="">
  </div>

where fileContents is a File that was saved on the server.

It works fine for images and pdf documents in full browser, but will not display the pdf in mobile.

I’m looking at converting the pdf to an image for mobile - haven’t got around to doing it yet though!

1 Like

Just as we had the same thing today at work, this also wont work for Electron >= 3.x as chromium plugins, and therefore PDF, is disabled, even If you set plugins to true

1 Like

What’s the business-case for embedding PDF’s in mobile and desktop applications?
This is one of those cases where I would try to convince the client to just download and open the PDF instead of embedding, saving me a lot of research and him/her a lot of money :slight_smile:
I know this doesn’t help you and I don’t mean to be condescending, but sometimes taking a step back with these things and discussing the impact will result in just avoiding these issues altogether.

2 Likes

Generally I tend to agree with you on that. In our case its an IDE that gets built and also executes Selenium tests. The result so far have been xml Files, which get rendered with Aurelia. But lately we’re adding a PDF output target. So with reports per run you end up quickly with a few of them and if you’re just wanting to quickly zoom through the last 5 or so, I feel its distracting to pull the User out of the app.

1 Like

Makes perfect sense :slight_smile:, sounds like an interesting project!

1 Like