A guide on converting HTML and CSS to a PDF file using JavaScript

I'm facing a challenge where I need to create a custom quote in pdf using data retrieved in JavaScript and sent in HTML. However, the issue is that no library supports CSS for the PDF generation process. After some research, I came across HTML2CANVAS as a potential solution, but it only returns the output as an image, which is not what I want.

document.getElementById('generationPdf').onclick = e =>{
    e.preventDefault()
    if (index + 1 === 1) {
        let folder_id = document.location.pathname.substring(8)
        let objectForDevis =  arrayObject[0]

        axios({
            method: 'post',
            url: folder_id+'/generate-pdf',
            data: {
                objectForDevis
            }
        }).then(function (response) {
            if (response) {
                       
            }
        });
    }
}

Answer №1

Utilize jsPDF with the example usage extracted from this specific website

html2canvas(document.body, {
    onrendered:function(canvas) {

        //Retrieve the image data URL, specifying image format and quality (0-1)
        var pageData = canvas.toDataURL('image/jpeg', 1.0);

         //Default orientation is vertical, paper dimensions in points, a4 format [595.28,841.89]
        var pdf = new jsPDF('', 'pt', 'a4');

        //Adjusting the image size using the two parameters after addImage, ensuring the page height is adjusted for a4 paper's width-height ratio.
        pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

        pdf.save('stone.pdf');

    }
})

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

Only events can trigger updates in an UpdatePanel

Hello everyone, I have encountered a problem with two update panels on my page. <asp:UpdatePanel ID="new_word_panel_UpdatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Panel ID='new_word_panel' ...

When async is set to true in an Ajax call, the response may come

I recently developed a function that works perfectly fine when the async option is set to false. However, I am now looking to achieve the same functionality and return value but with async set to true. function Call(param, proc) { var url = "../../ ...

jQuery ajax errors are slipping through the cracks and not being properly addressed

I'm struggling with the jQuery ajax success handler. I've noticed that any JavaScript errors that occur within the success handler are not being reported (no errors show up in the Firefox error console). This lack of error notifications is making ...

NodeJS making seven successful Ajax requests

I'm delving into the world of JavaScript, NodeJS, and electron with a goal to create a presenter-app for remote control over powerpoint presentations. My setup involves an electron server structured like this: const electron = require('electron ...

Exploring the versatility of combining CSS classes with MUI 5 SX prop

Is there a way to use multiple CSS classes with the MUI 5 SX prop? I've defined a base class for my Box components and now I want to add a second class specifically for styling the text inside the Box. When I try to apply both classes like sx={styles. ...

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

What is the best way to implement a dynamic Menu Component in next.js?

Hello friends! I am currently working on a Next.js web app with a Menu Component that fetches data dynamically through GraphQL. I really want to achieve server-side rendering for this menu component. My initial attempt to use getStaticProps() to render the ...

Reduce the text of the link

Trying to simplify a task, but I'm struggling with the solution. What I want to achieve is shortening a link to 30 characters and adding ... at the end if it's longer. Also, I'd like to make it possible to see the full link on hover similar ...

Steps for inserting a new entry at the start of a dictionary

My fetch method retrieves recordings from the database, but I need to prepend a new record to the existing data for frontend purposes. Can someone assist me with this? <script> export default { components: { }, data: function() { ...

Adding CSS styling to a particular component within your Vue application using Vuetify JS

Imagine having a Test.vue file containing 2 v-text-field components. I'm looking to style only the first text field using CSS. Test.vue <template> <div class="test"> <v-text-field></v-text-field> <v-tex ...

Encountering a JavaScript Error: "e is null" while utilizing assert for checking JavaScript alert text

I encountered a javascript alert in my program that I was able to interact with by reading the text and clicking on the buttons. However, when I tried to verify the alert text using assertequals function, I faced an error. Here is the code snippet: String ...

The onSubmit event handler seems to be malfunctioning within a Reactjs form

I recently started using React and encountered an issue with my form: class CustomForm extends React.Component { handleFormSubmit = (e) => { e.preventDefault(); const title = e.target.elements.title.value; const content = e ...

What is the best way to invoke functions with input of type 'number'?

As someone new to HTML, I have an input field with type=number: <input type="number" min="1" value="1" id="amount-input" (click)="chooseStanding(standingspot.priceCategory)"> When the (click) event i ...

The functionality of the custom file upload button is experiencing issues on Microsoft Edge

I've been working on creating a unique custom image upload button that functions perfectly in Chrome, Firefox, and Opera based on my testing. However, I'm facing an issue where it doesn't work properly in Microsoft Edge. Feel free to check ...

Adding a C# variable to a URL in a Razor view using jQuery

My Razor page looks like this: @{ ViewData["Title"] = "mypage"; string ApiAddress = "https://localhost:8114/api/"; } <div> ... </div> @section Scripts{ <script> functio ...

Implementing a Scalable Application with React Redux, Thunk, and Saga

What sets Redux-Saga apart from Redux-Thunk? Can you explain the primary use of redux saga? What exactly is the objective of redux thunk? ...

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

What is the process for creating a folder using Firebase Cloud Functions with Storage?

How do I create a folder named "posts"? Storage bucket path --> gs://app.appspot.com/posts Code to generate thumbnail from storage object exports.generateThumbnail = functions.storage.object() .onChange(event => { const object = event.data ...

Implementing a loading animation effect using AJAX that requires a loop delay and sleep functionality

My jquery ui dialog is loaded via ajax with a partial view from the server. Initially, the dialog opens as a dialog-ajax-loader and then animates/grows to fit the content once the call returns. The issue arises when the dialog content gets cached or the a ...

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...