Exporting jsPDF without maintaining the original CSS styling



I've got this code that I'm using to export HTML to PDF, and it's functional; however, the CSS is not being applied.

<body>
    <div class="container">
        <div style="background-color: yellow" id="pagina">Page to Print</div>
        <div id="editor">
             <a href="#" class="btn btn-primary download-pdf">Download PDF</a>
        </div>
    </div>
 </body>
 <script type="text/javascript">

    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function(element, renderer){
            return true;
        }
    };
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170, 
        'elementHandlers': specialElementHandlers
    });

        $('.download-pdf').click(function(){    
            doc.save('demo.pdf');
        });  

Is there a way to export with CSS included?

Answer №1

jspdf's website mentions that the HTML renderer is still in its early stages of development. Some other sources have also pointed out that css styling is not currently supported, including inline and imported stylesheets.

If you're open to installing a third-party application on your server, there's an alternative option available. You can explore a tutorial that uses phantomjs to convert HTML into PDF documents by visiting this link.

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

Utilizing Bootstrap 5 to showcase a variety of images that adapt to different screen sizes

Using Bootstrap 5, I am attempting to utilize an img tag to showcase a different image depending on the device - mobile, tablet, or desktop. However, I am facing challenges in correctly setting the breakpoints for the wrapper divs using the display utiliti ...

Enhancing the appearance of Angular Material components through nested components

HomeComponent has templates that include a router outlet /* home.component.ts */ ... <mat-sidenav-container> <mat-sidenav-content> <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container&g ...

Create a unique CSS class that combines custom styling with the pre-defined classes provided by

Hello everyone, I'm curious if there is a way to create a custom CSS class that incorporates existing Bootstrap classes? For instance, take a look at the following snippet of HTML: <div class="text-primary center-block">Here is some text</ ...

Ensure that the ng-view element has a height of 100% and

Currently, I am working on developing an AngularJS app and my index page consists of a ng-view where all the content is injected using ui-router: <header> <nav class="navbar"> //content for navbar will go here </nav </hea ...

I am experiencing an issue where the bootstrap 4 dropdown menu disappears behind a div within the

This dynamic table is created using div elements and allows horizontal scrolling. Each row in the table can be collapsed to reveal additional rows with two images for better visualization. The dropdown menu should have a z-index of 9999, making it appear a ...

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

Setting the background color in the navbar of a Laravel application

I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

Utilizing Flexbox for Spacing

When utilizing flex containers, is it considered safe and acceptable to apply margin-top, margin-bottom, margin-left, margin-right, and padding to create a little space between elements or shift them to the left or right? Or is it more advisable to use f ...

Ways to adjust image height to fit within a container while preserving its original aspect ratio

Does anyone know how to make an image in a two-column section fill its container without becoming distorted? I've tried using object fit and adjusting max widths, but nothing seems to work. Any advice would be greatly appreciated. Thank you. #sect ...

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

Elements that are hidden or not displayed are still able to receive mouse over events

I am in the process of learning how to handle events within svgs and I have encountered a strange issue. Currently, I am working on an infovis project where I create an interface to display various column-graphs. This part is functioning well so far. Ho ...

Navigating with React Router and a Navbar

Hey there, new to React and currently working on setting up routing on my home page. The links are currently located within my navbar component, but I am thinking that I need to configure the router in App.js instead. I have Contact, Social, and Hobbies ...

Table with a dynamic image background that seamlessly adjusts to full width while maintaining its original aspect ratio

I am currently facing an issue with a table that has a background image. I want the background image to span 100% of the width of the div container and automatically adjust its height while maintaining its aspect ratio. #pitch{ background-color: d9ffd9 ...

Align the footer vertically with Bootstrap 4, ensuring it stays in line with columns and rows

Seeking a solution to vertically align the 2 rows within the footer, both arranged using a Bootstrap grid. My attempt involved creating a content wrapper and utilizing a conventional flexbox solution: display: flex; align-items: center. However, this caus ...

Changing the Width of a Material Icon

I'm currently working with Angular and Angular Material, and I have a md-button that includes both an icon and text. You can view it here: http://jsfiddle.net/u7fp5wxv Here is the code snippet for reference: <md-button layout="row" style="width: ...

Ways to Utilize CSS for Substituting Text

Is there a way to change Type: to Class: using CSS? <span class="skills">Type:<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span> ...

How is it possible for the zero value to still be submitted even after I have included display error messages?

I have written some code to display error messages in PHP, but it seems that the error message is not displayed when all fields are empty. This results in submitting empty values to the database. <!DOCTYPE HTML> <html> <head> <style ...

The issue arises when the mat-panel-description is not properly aligned with the shrinking panel

Within my HTML, I have a mat-panel with a description that is populated by a variable from the TS file. However, I am encountering an issue where if I shrink the panel and the description is too long, the text is cut off at the top and bottom. Is there a w ...