Export web application to pdf using server-side render - javascript

Our web application(many d3 charts) is set up by vue, and I could export our
webpage to pdf by the combination of canvg, html2canvas(convert web content to
png) and emit png file to server and use nodejs to download it automatically
and periodically(weekly report).
However, I was asked to use different render method from client-side to
server side rendering and use wkhtmltopdf or phantomjs to download pdf.
My question is that is it difficult to render many complicated d3 chart and edit
css in server side rendering by using vue or another technique?
Thanks!

The wkhtmltopdf is a popular library for converting complex html content to pdf.
You don't have to worry about your complicated d3 chart or css. It will handle it. But you have to install wkhtmltopdf command line tool on your system.

SVG DOM elements can be convert into different images format using server side rendering option. Apache Batik such a library to convert SVG DOM elements into pdf,png,jpg,word.
Batik is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation.
The project’s ambition is to give developers a set of core modules that can be used together or individually to support specific SVG solutions. Examples of modules are the SVG Parser, the SVG Generator and the SVG DOM. Another ambition for the Batik project is to make it highly extensible —for example, Batik allows the developer to handle custom SVG elements. Even though the goal of the project is to provide a set of core modules, one of the deliverables is a full fledged SVG browser implementation which validates the various modules and their inter-operability.

Related

SBML glyph/graph/layout

Do you know how to generate a draw or graph that I can convert or export in SVG from my SBML models. Or maybe directly generate SVG from SBML model wrote in XML?
I read documentation baut it doesn't help me for this projet.
There are ways to achieve that, but how useful these graphs depend on the content of the SBML file. Suppose the SBML file contains layout information in the SBML layout package. In that case, it is possible to convert it to such an image using tools such as the following:
EscherConverter
SBML Layout Viewer
If the SBML file does not contain layout information, automated layout tools can generate such graphs, e.g.,
Cytoscape with the Cy3SBML app
The online Systems Biology Format Converter (SBFC)
CellDesigner
Another option could be the MINERVA platform that generates layouts similar to that of CellDesigner and provides many options to work with SBML, e.g., via web services.
Please note:
The Systems Biology Format Converter (SBFC) creates GraphViz files for further processing. You can compile them using GraphViz and obtain SVGs based on automated layout.
CellDesigner directly supports exporting SVG. From File > Export Image… > Select SVG files and then Save. Currently, CellDesigner only supports SBML up to Level 2 Version 4. Its Layouts are often handy and can be easily manually adjusted. However, it may be necessary to downconvert the model first using SBFC. There are also importers and converters for CellDesigner that can deal with the SBML Layout package if needed, such as the CellDesigner Parser.
I would contact the Sauro lab, they have a number of tools in development that should be able to do this (including PDF). They also support the SBML layout/render extension. They are also developing a pydot to SBML converter.

Offline report with D3, md and equations

Is it possible to create a single html page containing embedded D3js charts, CommonMark text, and equations (e.g. Katex or MathJax) and have it all rendered the browser offline?
Must have:
Works offline using modern Firefox/Chrome/Safari, after having
downloaded a minimal number of JavaScript libs.
No requirement for installing anything beyond the web browser. So no local http server, Pandoc, R, Python etc.
Should have:
Possible to write everything in a single html file, which opens in a normal modern browser.
Good archival properties with minimal maintanence.
Motivation:
We work in a high security locked down IT environment and can’t install stuff, but we do have decent web browsers and can run javascript in them.
We routinely share small analytical reports internally, and are experimenting with delivering a directory containing
an html file (with embedded JSON data), and
downloaded D3 and Underscore librariess
All the internal customer has to do is click on index.html. So far this has been very succesful, but we'd like to use markdown and equations too.
We are vaguely aware of data science workbook solutions like Jupyter and Observable, but not sure that these meet our criteria.
Clarification
I know we can download libs and place them in a dir alongside index.html, but I'm not sure if a JavaScript library exists which can render the markdown and equations and write the results directly into the DOM. And even if such a library exists, where in index.html would the markdown be written? Is there some kind of html tag which can just hide a load of raw text which will be parsed by JS?
To answer your question, it is possible. You'll either need Node app that will render static HTML pages or simple HTML page with embedded Javascript. Since all these libraries are available as UDM packages, I suggest 2nd option.
CommonMark CDN: https://cdnjs.com/libraries/commonmark
KaTeX CDN: https://khan.github.io/KaTeX/docs/browser.html
You'll only need to download these libraries and include them in page. KaTeX includes JS to convert simple text to rendered mathematical equation, you only need to give it text and element where to render equation: https://khan.github.io/KaTeX/docs/api.html. CommonMark is similar but it only gives you rendered HTML, you need to insert it with element.innerHTML yourself: https://www.npmjs.com/package/commonmark.

Nodejs create a PNG image with text inside

I'm trying to create a new PNG file to serve back to clients via HTTP (as a response type image/png)
The new file is created by concatenating 3 base PNG files and adding a custom text in the middle of the image.
Problem is, there no built-in library in nodejs to do this. I spent a couple of hours searching and to my surprise, there is no pure JS library to do this. The closest thing is node-pngjs but it lacks the ability to add text. I understand that the text part is complicated since it's somewhat dependent on the OS (fonts installed, DLLs to interface with said fonts, etc).
There are other node modules that are wrappers around imageMagick (gm) and GTK (canvas) but unfortunately imageMagick is 155MB of binaries, and to use canvas you need to compile from source, install python and VS 2010 C++ Express Edition and it does not work on the lastest version of GTK.
The best I got right now is to write an .NET assembly and use it from inside node via edge.js, but that will require both Windows OS and .NET framework on the server.
Again, the complicated part here is adding the text inside the image.
Any suggestion on how to get this working without a sh**load of external dependencies?
Yes you are correct, the Node.js support for image processing libraries is weak, most are the wrappers of some CLI application.
The solution that I would use involves PhantomJS which has the canvas and svg support, you could use these features. It's lighter than the other options and does not require external applications to be installed. http://phantomjs.org/quick-start.html

Output 300 png images with correct filenames from svg or svg via canvas?

For browsers that don't support SVG, I'd like to show a static image of a chart instead of an interactive version.
One idea is to generate all possible chart states (around 300) beforehand. I tried using the Canvas2Image library but it doesn't seem to allow me to specify a filename. Is there any workaround? Perhaps a server-side solution?
There's a couple other ways to solve this.
rsvg is a rendering library that processes SVGs statically single-pass. It's used in ImageMagick's convert tool, and also has python and other bindings. Some people find various SVG-isms aren't supported, but rsvg gets updates now and then so best to just try and see.
inkscape is a GUI program that includes SVG->PNG conversion. But it can also be used exclusively on the command line (no X11 required). See man inkscape for all the command line options that can be used to process your svg's; it's quite flexible. The rendering is relatively fast. The main downside is that being a GUI program it has a lot of dependencies, that might not be present on a web server.

Converting d3.js SVG code to a standalone program -- any suggestions?

I have some scripts written with d3.js that generate SVG charts. I'd like to generate those charts with a standalone program -- what is the easiest way I can convert those scripts to run in batch mode, without a browser?
You could:
Convert this to a node.js program. You'd have access to the filesystem and would be able to save generated SVGs easily. You'd need node-canvas to replace the HTML canvas. See this d3 example to get started using d3 with node.
You could use the filesystem APIs in Chrome with your existing scripts to write files to the hard disk. This may be easier, because you would just need to implement the filesystem code on top of what you have already. See this html5rocks article for information on writing to the local file system.

Categories