The jsPDF styling with CSS is not functioning correctly

I am attempting to convert a specific div to PDF using jsPDF. Below is the structure of the div:

<div id="pdffile" style="display:none" class="containerPDF">
     <headerp><h1 id="pdfTitle" style="text-align: center; color:red;"></h1></headerp>
     <navp>
         <div id="pdfImage"></div>
</navp>
     <articlep>
     <h1>Description</h1><p id="pdfDescription"></p>
    </articlep>
     <footerp style="text-align: center;">Copyright © Emoovio</footerp>
 </div>
 <div id="editor"></div>

Additionally, this is my jQuery code snippet:

$('#cmd').click(function () {
var x =  $(".entry-title").text();

        doc.fromHTML($('#pdffile').html(), 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });
        //doc.autoPrint();
        doc.save('emoovio-'+x+'.pdf');

});

However, when I run this code, the resulting PDF lacks any styling such as center alignment or color formatting.

Answer №1

If you want to preserve all formatting, consider using html2pdf.js. This tool converts your HTML content into an image before converting it into a PDF file. Check out their documentation for more information.

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

Creating a Stylish Table Using CSS

Looking for the most effective way to utilize divs in order to create a table-like structure similar to this html table: <table width="100%"> <tr> <td align="right"> Name: </td> <td align ...

Disallow standard click behavior if a specific class is present elsewhere on the webpage

My CSS code triggers a dropdown menu to open when the .dashboard-actions class is clicked. When the user clicks, the class of the 2nd div in the tree changes to "dropdown open", indicating that the dropdown menu is visible. Clicking off the menu removes th ...

Is there a different method to retrieve the a.href of a list element using jQuery?

Below is the HTML code: <ul class="tabs"> <li><a href="#doc-new">Home</a></li> <li class="active"><a href="#doc-fav">Profile</a></li> <li><a href="#doc-read">Messages</a>& ...

Is there a more efficient method than repeatedly using parent() in jQuery?

My typical code usage often looks similar to this: $(document).on("click", ".cChatSmileyWindow", $.proxy(function(e) { var windowID = $(e.currentTarget).parent().parent().parent().data("windowid"); }, this)); Is there a more elegant solution for this ...

What is causing the extra space at the top of my page from the contextual menu?

My goal is to implement a contextual menu for my HTML web application. Strangely, when the menu is hidden, there is no space at the top of the page, but once it's activated, some empty space appears. Contextual menu in disabled state: https://i.sstat ...

How to stop PHP code from running before it should in an HTML form script

I recently created a form where the PHP code is located directly underneath the HTML form code within the same file. The issue I am encountering is that when the user fails to fill out all required fields and submits the form, the page immediately displa ...

The Bootstrap 4 Carousel Indicators are missing from the page

I am currently working on creating a carousel slider with indicators at the bottom using Bootstrap 4.1.3. However, I have run into an issue where the indicators are not visible, although they still function when clicked on. I have attempted solutions such ...

A guide on incorporating search functionality into a dropdown list in asp.net by utilizing Select2.js

In my current project utilizing a MasterPage, I have created a content page named AddEmployeeDetail.aspx. The following code snippet shows the setup of this page: <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master&quo ...

Is there a way to insert animated images in front of every navigation menu item?

I have successfully implemented the HTML and CSS for my navigation menu items, but now I'm facing an issue trying to incorporate unique images right before each menu item in WordPress. Due to the hover animation on the menu names, I couldn't get ...

Include the window.innerWidth value in the initial GET request

When dealing with a server-side rendered app that has responsive styling based on window.innerWidth, the challenge lies in how to pass the client's screen size in the initial GET request for index.html. This is crucial so that the server can prepare a ...

Trouble keeping the dropdown submenu from staying open

Trying to figure out how to keep my dropdown menu open only when clicked. Currently, the submenu disappears if I move my mouse away from it. I attempted using e.stopPropagation without success. Is there a CSS or Javascript solution that can help with this ...

Do my Dash tutorials appear drastically different from the documentation? Is this normal?

As an experienced back-end engineer, I am delving into the world of browser-based GUI design for the first time, specifically with HTML, CSS, and more. My current project involves building a dashboard using Dash, and I am in the early stages of familiarizi ...

Employing foreach loop for generating hyperlinks from an array

I am seeking assistance in generating links using a PHP foreach loop that cycles through an array containing the names of navbar links for a website. Currently, my loop is creating links that lead to a 404 error page and display unwanted HTML tags in the ...

Expanding div with row class all the way to the bottom using Bootstrap 4

I have implemented Bootstrap tabs on my webpage and I am looking to extend the height of the tab content to fill the remaining space (stretching it to the bottom). The layout includes a header followed by the tabs, with the header having varying heights. D ...

Extending EJS partials using jQuery

I am currently exploring the integration of JQuery to dynamically add an EJS partial. My goal is to enable infinite scrolling within a table - I have opted for EJS to render the rows of the table as partials and leverage more EJS to exhibit the variables p ...

Excessive Margins in Bootstrap on Mobile Devices

After attempting to create a webpage using Bootstrap 3.3.6, everything looked good on my laptop. However, when I tried to view it on mobile devices using Chrome and other browsers, there was a significant offset issue. Current situation: https://i.sstati ...

How to create a hover effect that makes the background semi-transparent using CSS, CSS3, or jQuery

In order to achieve the desired effect of making the background of the whole page opaque when hovering over a hyperlink, I am seeking a solution that will trigger the body class to have a colored background with opacity. The code provided below does not wo ...

Issue with customizing CSS in Fullcalendar Version 5 for Angular not functioning as expected

Currently, I am integrating Fullcalendar v5 into our Angular project and am looking to customize the Fullcalendar toolbar title color and size. In the styles.scss file, I inserted the following CSS code: .fc .fc-toolbar-title { font-size: 1.2em; color ...

With Bootstrap 4 navigation bar, once a container is added, the elements will automatically align to the right

Greetings! I am a newcomer to the world of bootstrap, so please bear with me if my question seems too basic. My current challenge involves creating a navbar using bootstrap. However, I have encountered an issue where the logo remains on the left side whi ...

Utilize custom fonts from your local directory within a Vite Vue3 project

Inside my main.scss file, I am loading local fonts from the assets/styles/fonts folder: @font-face { font-family: 'Opensans-Bold'; font-style: normal; src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truety ...