Export web application content to PDF through rendering on the server side

Our interactive web application, which includes multiple d3 charts, is built with vue. Currently, I am able to export our webpage to a PDF file by utilizing canvg and html2canvas to convert the content into PNG format. The PNG file is then transmitted to the server using nodejs for automatic download on a regular basis (weekly reports).

Recently, there has been a request to explore an alternative rendering method that involves transitioning from client-side to server-side rendering. This new approach would entail using wkhtmltopdf or phantomjs to generate and download PDF files.

I am curious about the feasibility of rendering complex d3 charts and making CSS adjustments during server-side rendering using vue or another technique. Any insights would be greatly appreciated!

Thank you in advance!

Answer №1

If you're looking to convert intricate HTML content into PDF, the wkhtmltopdf library is a popular choice.

You can trust it to handle complex d3 charts and CSS with ease. Just make sure to have the wkhtmltopdf command line tool installed on your system.

Answer №2

Server side rendering allows for the conversion of SVG DOM elements into various image formats. Apache Batik is a useful library that can perform this task, converting SVG elements into pdf, png, jpg, and even word files.

Apache Batik is a Java-based toolkit designed for applications or applets that need to work with images in Scalable Vector Graphics (SVG) format. It offers core modules such as the SVG Parser, SVG Generator, and SVG DOM which developers can use individually or together to support specific SVG solutions. Extensibility is a key feature of the Batik project, allowing developers to handle custom SVG elements. Additionally, Batik includes a full fledged SVG browser implementation to test the various modules and ensure their interoperability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate the dialog box exclusively after data has been submitted via the submit button on a form

My goal is to create a data saving functionality with a next button. After filling out the form, clicking on the next button triggers a popup dialog asking, "Do you want to submit your data?" To achieve this, I included the following code in my submit but ...

It is advised not to use arrow functions to assign data when fetching API data with axios in Vue.js 2

Trying to retrieve data from a URL using Axios in my Vue app is resulting in the error message: Error: Arrow function should not return assignment Complete error message: Error: Arrow function should not return assignment (no-return-assign) at src\co ...

Detecting answering machines with Twilio

Hello, I work as a firmware developer at a startup based in Paris. Currently, we are incorporating Twilio into our product and facing an issue with stopping calls to voice machines using the IfMachine parameter. Despite our efforts, we have not been succes ...

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

angular .module('ApplicationOne',[]) .controller('myControllerOne', function($scope){ $scope.name = "Luther"; $scope.fname = "Martin"; $scope.ed = "B.TECH"; }); angular .module('App2&apos ...

A step-by-step guide on creating a live crud application with vuex and socketio

I am struggling to achieve a realtime crud operation using vuex, node, express, and socketio with the current syntax provided. Here is the code snippet: Server index.js const server = app.listen('3000',() => { console.log('<--- ...

Mastering the Art of Live Search in Drop Down Multi Select

I need to develop a search functionality similar to the one found on . This search should allow users to select options from a dropdown menu or type their own search query, and provide live search results. I attempted to use the jQuery plugin https://www.j ...

What causes my input field to lose focus in React.js after typing just one character?

My react.js component is experiencing an issue where the input field loses focus whenever a character is typed. To continue typing or editing, I have to click on the input field again. What could be causing this problem? Below is the code snippet in quest ...

Can Mongo data be categorized, or must I organize it using node/javascript?

I am working with a mongo collection and using the node.js driver to query it in the following way: db.collection('notify').find(); Here is the data that is returned: { _id: '1376179201714-user102', state: 'unread&apo ...

The Authorization Header is added just once during an AJAX CORS request

I am making calls to my RESTful API from JavaScript in a CORS scenario. To send my POST authenticated request, I am utilizing JQuery. Below is an example: function postCall(requestSettings, includeAccessToken) { requestSettings.type = 'POST& ...

The error message "strange await can only be used in async functions" is specific to Node.js

I encountered a strange error where I am only allowed to use await in async functions, but I am using it in an async function. What's odd is that I didn't have this error before when I was editing another file, and now suddenly it pops up. I trie ...

Exploring the implementation of query parameters in Nest.js

I am currently a freshman in the world of Nest.js. Below is an excerpt from my code: @Get('findByFilter/:params') async findByFilter(@Query() query): Promise<Article[]> { } I have utilized Postman to test this specific router. ht ...

Guide on transforming an array containing indexed objects into a simple object

Can anyone help me with converting an array of this specific type? place: [ { "_id": "xxxxx", "loc": [ 0: "xxx", 1: "xxx" ] } ] Into something ...

Using JSON Zip Response with Node.js

Hi there! I'm relatively new to working with node.js and I'm currently attempting to send a zip file containing JSON results, but I've been encountering some unexpected difficulties along the way. My tech stack includes NodeJS, ExpressJS, L ...

Resolved the time zone problem that was affecting the retrieval of data from the AWS Redshift database in Next

Currently utilizing Next.js for fetching data from AWS Redshift. When running a query from DataGrip, the results display as follows: orderMonth | repeatC | newC 2024-02-01 | 81 | 122 2024-01-01 | 3189 | 4097 However, upon retrieving the same query ...

What is the process for retrieving pending messages in ActiveMQ?

I have been working on a Socket.IO application that is designed to consume messages from an ActiveMQ queue, utilizing the STOMP library for Node.js. While I am able to successfully send and receive messages from the queue, I am now looking for a way to re ...

Limit the 'contenteditable' attribute in table data to accept only integers

I have a question regarding editing table data row. Is there a way to restrict it to only integers? Thank you for your assistance! <td contenteditable="true" class="product_rate"></td> ...

Using the 'type' field as a parameter in a Vue2 component object

I need help with passing an object into my component. Here is a snippet of the object's properties: { title: "myTitle", type: "myType" } However, when I define the prop in my component like this, I get a Vue runtime warning st ...

Setting cookies with NextJS Route API post middleware

@ Using NextJS 13.3 with App Dir and API Routes. I am currently working on implementing an authentication system using NextJS with my external NodeJS backend. The process involves the frontend sending credentials to the backend, which validates them and r ...

Utilizing window.matchMedia in Javascript to retain user selections during page transitions

I am encountering difficulties with the prefers-color-scheme feature and the logic I am attempting to implement. Specifically, I have a toggle on my website that allows users to override their preferred color scheme (black or light mode). However, I am fac ...

Developing uniform resource locators with jQuery

As I work on developing my webapp, I have made use of the tag in my JSPs to ensure that all links within the application - whether they lead to pages or resources like images and CSS - always stem from the root directory rather than being relative to the ...