We Keep Coding

Exporting complex Angular view to PDF file without converting content to image/canvas on client-side

Technologies: front-end -> Angular 9, back-end -> JAVA.
Description: I am using angular to create dashboard with moderately complex DOM structured with embedded css styling and also is responsive. Complex means, there are 4 tabbed-panes with 4-8 SVG graphs in each tab in one dashboard. Dashboard also comprises of few images (some are from different domain and some are from same file system). For sake of optimization, I draw graph using API responses only when tabs are clicked to show results. So request parameters while navigating from parent view is stored using Angular route navigation states in order to request other apis to generate graphs.
I have already tried jsPDF, PDFmake, htmlPdfMake, html2pdf libraries but all these libraries has one or the other limitations not fit to my requirement. For e.g. jsPDF (.html(), .fromHtml()) don't consider embedded with CSS and only feeds textual contents (excludes svg) into PDF file. Other ways to create image out of html body using html2canvas and then converts image to pdf which makes text non-selectable. Pdfmake has complex ways but again requires additional limited css styling separately and so on.
Then I use traditional way to window.print() which does gives selectable text, also the text inside graphs are selectable the way I needed, but drawback is my dashboard is responsive and when the graphs are generated, the SVG dimensions remains fixed. So when window triggers print(), the default A4 size paper setting adjust the view to lower device viewport (say, tablet) due to its responsiveness but size of SVG graphs remains the same which looks weird (imagine, graphs aligns to the left leaving extra space on its right-side). This was fixed by creating separate view and remove responsiveness from that view and trigger window.print(). But this solution forcing me to show the view on client-side getting graphs generated and then download to PDF using window.print(). However this solution does not satisfies my client's requirement and asking me to hide newly re-generated view but instead agreed to show view in new window tab and add the ability to download to PDF (like PDF viewer or similar) but disagreement on window.print(). Currently some how I succeeded to show only one view on browser's new tab using BLOB or document.write(). Now from here I need guidance on how to proceed in order to achieve below requirement.
Requirement: To generate HTML content to PDF doc.
1) Open new browser tab and generate graphs combining all 4 tabbed panes (this should include taking request argument from state and make api calls).
2) Once all 4 views are ready with all the graphs generated and images at its expected place, then allow exporting entire view into PDF with Styling exactly what we see on browser
3) PDF must have proper margin and include title, link and logo at the bottom.
4) Client-side approach only.
5) Must have each text selectable inside the PDF document.
Questions:
1) What are the other approaches that can fulfill above requirements. If it includes server-side, then how?
2) Whether the current approach(on client-side) is doable considering above requirements, if not then why?

Diagram on a web page with Changing Values

I am trying to create a diagram which will display the IOPS between a hypervisor and a SAN on a web page (c# mvc web application), to show how much data transfer activity there is on a monitoring system.
For example something like this, however in this example the IOPS would be between the Hypervisor and the Virtual Machine:
Two part question:
1) Is there a free software package to create such a diagram where I can put dynamically changing values into a specific place?
2) If Q1 isn't feasible, is it possible to overlay the dynamic values?

My suggestion is looking at drawing the diagram out in SVG. Something like Inkscape should do just fine. It is free and open source.
You are able to add IDs and classes onto the elements in there as well so that you can access them in the standard JQuery way.
If you are feeling adventurous, you could draw it out using D3 here
which is for all your unique type charts and graphs.

I don't know about the software but it can be achieved by ws protocol HTML5 with java SSE(server send event).
On client side you can use a static image for the values which are not changing dynamically and place any html element and change its value dynamically via jquery.
Use this only when you are aware of comet technology and have extra time.

html flow charts/ workflow diagram

I have large set of flow charts and workflow diagrams. I want to draw them and convert them into a webpage, I also need every object in the flow chart to be clickable. I tried Visio and it does save the flow chart diagram as webpage. But I find the structure to be to be too complicated, with different level of file hierarchy with lot of javascript files and css files.
I just know some basic html and javascript and I need just a simple static clickable flow chart. Is there a program to do such? I know that there are few javascript libraries like Raphel which can draw interactive flowcharts. But I donot want such fancy stuff, my flowcharts are very complex and I have to manually draw them and convert them into webpage.

If all you need is just an image of the flowchart embedded in a webpage, with clickable areas, then an imagemap might just work for you.
You can save the flowchart image from Visio, powerpoint, photoshop or any such tool and then create an imagemap (it is a simple html code that allows you to execute code on click etc)
http://www.image-maps.com/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Drawing arbitary pictures on a webpage

I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...

It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).

Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.

how to create plots (non-flash) with mouse-over info boxes on the fly for the web?

I'm thinking about creating a tool to visualize scientific data on a website. For this, the user enters some query string and out comes a simple (x,y)-plot (similar to this)
I know that using Matplotlib, one can generate graphics on the fly for python. However, this doesn't solve the need for some custom java-script code to display the info boxes. I also came across google chart tools, which are very close to what I need. The problem here is, that the code needs to be fetched from google, which my employer won't like.
What would be the best OSS library for python, Java, PHP (or Java-script) out there to meet my requirements?
Thanks,
Chris

If you need dynamic elements without flash or Java applet then JavaScript is the best choice. To create plots you could use HTML5 canvas element.
Capturing mouse events is JS is trivial...