Issue with jsPDF: PNG file is either incomplete or corrupted

I'm encountering an issue while attempting to pass Image data to the addImage function. I have tried downgrading the versions of jspdf and html2canvas, as well as experimenting with different ways to import the two libraries, but the problem still persists.

Here is the code snippet:

  export() {
    console.log('printing');
     const data = document.getElementById('reportContent');
     this.generatePDF(data);
   }
   
   generatePDF(htmlContent) {
     html2canvas(htmlContent).then(canvas => {
       const imgWidth = 290;
       const imgHeight = (canvas.height * imgWidth / canvas.width);
       const contentDataURL = canvas.toDataURL('image/png');
       const pdf = new jsPDF('l', 'mm', 'a4');
       const position = 10;
       pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
       pdf.save('report.pdf');
     });
   }

Here is the HTML:

<div #reportContent style="display: none;" id = "reportContent"> 
      <table>
        <tr>
          <td style="color: red;background-color: blue;">1111
          </td>
          <td>2222
          </td>
        </tr>
      </table>
    </div>

Answer â„–1

The solution to the issue I encountered was due to the usage of display:none; within the HTML code. I made modifications to this function as follows:

  export() {
    console.log('printing');
    const content = document.getElementById('reportContent');
    content.style.display = "block";
    this.generatePDF(content);
    content.style.display = "none";
  }

It's important to note that a hidden Canvas cannot be printed.

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

Transfer information from one Angular JS page to another pager based on ID

In my use of the mobile angular js UI framework, I am a beginner in angular js and looking to transmit data from one page to another using city id. When a user clicks on a city, the data should be displayed according to that specific city. HOME PAGE: ht ...

Is the AngularJS application failing to transmit data accurately to Node.js?

I've been grappling with this issue for a few days now and I can't seem to pinpoint the problem. As someone relatively new to the MEAN stack, I might be overlooking something obvious. I followed the boilerplate code from mean.io for both the back ...

Error: Unable to locate module: "./library". The parent module directory is "/"

I keep encountering an issue in my project when attempting to load a module. Whenever I try to import it from the node_modules folder, I receive the following error: Uncaught Error: Module not found: "./MyLibrary". Parent module folder was: "/" However, i ...

Managing front-end with Angular2 and Spring Boot. What's the best approach?

I am using Spring Boot for my back-end and Angular2 for my front-end. I want to develop them separately and deploy them onto Heroku. I prefer that they have no common dependencies and should be in separate git repositories. From what I understand, there ...

Utilizing Socket IO and Node JS to stream audio from a microphone via sockets

I am currently developing an app that requires users to use their phone's microphone to communicate with each other in the game lobby. However, I have encountered several challenges along the way. My approach involves using Node JS socket io and sock ...

Adjust the height of Ngx Editor to meet your specific preferences

I have integrated ngx-editor into my MEAN stack application to create a wysiwyg editor. Everything is functioning as expected, but I am facing an issue with setting the height for the editor. I attempted to define the height in the component's css fil ...

Revolutionary Approach to Efficiently Handle Multiple rows with Jquery

Greetings to everyone, I am currently in the process of developing an application that retrieves data from a database via AJAX by calling a .php file. Within this app, I have a table with 4 columns. The first two columns consist of dropdown menus, the thi ...

Using jQuery's .html function to insert images

I have a unique counter that counts in currencies, such as Yen and Euro. Each number, as well as the currency sign and separator, are all displayed on the webpage using custom-designed icons. I utilize the display: flex; property in my container div and ap ...

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

Filtering an array within an array based on user input

I am currently facing a challenge in filtering the child elements of an array. I am puzzled on how to specifically target children elements. So far, my filter is only functioning at the top level. Array: options: [ {name: 'Ð’Ñ‹Ñ…Ð ...

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

Is Angular 2+ responsible for loading the entire module or only the exported components within it?

I'm dealing with a situation where I have a large module but only need to export one specific component. I'm wondering if Angular loads the entire module or just the exported components, as I want to optimize performance without compromising the ...

Sending data from an HTML textarea to a PHP variable without user input

After spending more than two days searching for a solution to this problem, I am now reaching out directly with my question. Although there have been some hints and partial answers, nothing has definitively resolved the issue I am facing, prompting me to m ...

Could someone clarify for me why I am unable to view the connection status within this code?

Having trouble with the Ionic Network plugin. I've included this code snippet, but it's not functioning as expected. No console logs or error messages are showing up. import { Network } from '@ionic-native/network'; ionViewDidLoad() { ...

The jQuery element selection feature is not functioning

Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...

Immediately after setting up a fresh Angular 13 project, addressing the npm ERR! regarding the missing peer dependency ajv@^6.9.1 requested by [email protected]

Recently, I initialized a fresh Angular project by running npx @angular/cli@13 new Ubisoft.SupplierPortalNext.Spa and then performed npm install, which resulted in the following warning: npm WARN [email protected] requires a peer of ajv@^6.9.1 but n ...

Using Protractor to extract text from multiple paragraphs

How do I retrieve the values of all paragraphs (p) at once? Below is an example of how my inspect view appears: "Testing sample one." "Testing sample two." And here is a snippet of my code to extract the value of id 'run': browser.findElement ...

How should one properly utilize the app and pages directories in a next.js project?

For my current next.js 13 project, I have decided to utilize the /pages directory instead of /app. Nonetheless, I recently included the app directory specifically for its new features related to dynamic sitemap rendering. Do you think this approach is app ...

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

My current time zone is GMT+8, and the AWS region I am using is Singapore (ap-southeast-1). I am facing an issue where there are discrepancies in date calculations between my local machine and when I deploy my code on AWS Lambda. My goal is to ensure that ...

Automating button clicks after a component has loaded in Angular 2+ can be achieved by implementing a

Currently, I am working on implementing an automatic search function in Angular that triggers after a component loads. Right now, the function is triggered by a button click, but I want to automate this process. <button mat-raised-button class="mat-whi ...