I'm developing a web application using .Net core 3.0 (Back-end) and Angular 8 (Front-end).
The user completes a form and then I have to generate a PDF (with design & picture) with the data that he put. The PDF needs to be in high quality.
I have tried several libraries in both Front-end & Back-end.
I need to use a free library.
I think it will be easier and better to do it in the Front-end because the user will need to print it (directly most of the time).
And also, in case of high traffic generate it from the back-end will use too many resources.
Also, "print" the html page is not an option.
I've tried :
PdfMake,
kendo-angular-pdf-export,
Jspdf,
wkhtml,
and others...
The best ones:
Kendo UI
It was really the best one, easy to implement and doing exactly what I needed. But is not free and one license is like 900e/user
pdfMake
The problem with that was that I will have to do all the design with the library-style, So I will have some limitations.
I would like to be able to generate a pdf from an HTML page including the CSS.
I'm blocked with that pdf generation.
Did someone succeed to generate a proper pdf with a good design with pdfMake?
Thanks a lot in advance.
A solution I've used is to create a service which, on the back end, generates the HTML and uses headless Chrome to render the PDF. Stream that back to the client browser.
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
Let me explain the scenario first.
I have a simple static dashboard html page with 5 simple charts created with HTML5, CSS
and javascript.
It renders data from a static Json to display the charts.
Its is not online and running in my local system.
There are no back end code which connects to a database.
Now I want to convert this to an Ipad app where I can see the dasboard page without out internet connection.
Kindly provide me a best way to do this.
Regards,
Shanmugam
You can use Apache Cordova (or phonegap) for building native web applications for all major platforms using HTML 5 , CSS and JavaScript.
You can refer to this Blog post on how to easily port existing HTML5 based application to iOS and Android.
Additionally you can also check this link for some more insights.
I have a website that has a lot of data and that is sensitive to the website so I made a code that prevents right clicks but if you are using Safari it is easy to see the data I need to hide the info also so safari cant view it ether.
Client side, you cannot secure your code from view. Firebug will still show the code. You should have sensitive data on the Server.
You can't.
If the data is sufficiently sensitive that people shouldn't be able to view it, don't put it on a web site.
I m not sure if there is a completely safe solution.
if its images, use flash to load them dynamically.
yet people who knows swf-bin specs can decompile your swf files and find out the real image path.
if its data & text.
as much I can do is to
1: use pure js to render all views.
use XMLHttpRequest/ActiveXObject to load data and import these ajax js code # runtime.
compress your js/css code before deploy
here is one of my mockups
2: on the server side
check the request header to drop command line request.
exchange cookie/session key for each time.
BUT, this will make google-bots don't know how to inspect your site.
so DON'T do that on your landing page.
Is there any way to read and view a PowerPoint presentation within a Windows Store App?
What I want to achieve is to open the .pptx file from the computer and display the slides inside the app. Basically, it would be like a PowerPoint viewer.
What I figured out with extensive searching is I can use Aspose.Slides API to convert the slides to images and then display them to the user. But firstly, Aspose.Slides is not available for WinRT and secondly, it is not free. The OOXML is really complicated and I can't find an approach to achieve this via OOXML. What could be a work around to the problem? And can there be a way to manipulate the slides?
I haven't seen a WinRT API for PowerPoint, but if you found one for .NET you could easily write a web service that would take a ppt or pptx and use the API to convert it to images or something else that you can display.
If you have some control over the presentations - you might also consider saving them as XPS which is WPF/XAML based format, but even then you would need to do some more work to process it to a XAML format compatible with WinRT/XAML and might still have some problems loading custom embedded fonts etc.
I currently have a "PrintingWebService" that I call from an AJAX page with all the information that is needed to construct a highly customized PDF printout using PDF Sharp and the PDFSharp's GDI+ mode, which takes DrawString and other commands that work basically just like GDI+ only they are drawn to the PDF.
I then save the PDF file to a location on the webserver and return the file name from the web service, and the AJAX page opens a new window with the pdf file.
So far, it works well, however, there is one part of my AJAX page that I want to printout and I haven't come up with a solution for yet. I've got a string of the HTML content of a TinyMCE editor that I want to dispay in the bottom part of the PDF page.
I'm looking for some sort of tool I could use for this purpose. Even something opensource that prints to GDI+ I could use by taking the source code and translating it to use PdfSharp's GDI+ (the class names are like XGraphics, with each class having X before the GDI+ name).
If I have to I will limit what HTML can be generated by TinyMCE and write my own renderer, but that will be a big challenge, so I'm looking for other solutions first.
I've stayed away from a printer-friendly page approach because I wanted to construct a page that was a near identical of an existing WinForms printout, using my existing code. With PdfSharp I was able to convert all the code except the text area stuff (which used the RichTextBox and RTF in the WinForms version).
Tony,
I personally have used WebSupergoo's ABCPdf library with much success. You can actually render HTML directly to the PDF and it does fairly well in regards to accuracy.
Another free software that will allow you the flexibility of writing HTML to PDF that I have used in the past with much success is iTextSharp.
Otherwise, I think you'll have to write something to render HTML to GDI.
Either way, you may want to consider using an HttpHandler that you map to using your web.config to generate the PDF file. This will allow for you to render the PDF to a bytestream and then dump it directly to the user (as opposed to having to save each PDF receipt to the web server). It will also allow for you to use the .pdf extension in the page that returns the receipt (PurchaseReceipt.pdf could be mapped to a HttpHandler)... making it more cross-browser friendly. Older versions of Adobe / Browsers will not display correctly if you start throwing a PDF byte stream from an ASPX page.
Hope this helps.