JsPdf is saving a pdf but takes too long time to show it in google chrome

[stounej]

I'm using JsPDF to download an html styled element, but when it is downloaded, it takes too long to be showed in google chrome as pdf (shows just an empty pdf document at first and charge it after long time),

the size of the file is only 300KB, I don't know why I have this problem however it's showed correctly in mozilla firefox browser

Please do you know how could I solve this problem.

this is my code

generatePDF = () => {
var doc = new jsPDF('p','pt',"a4");
const inp = document.getElementById("cv");
doc.html( inp , {
html2canvas: {
scale: 0.75,
},
callback: function (doc) {
var pageCount = doc.internal.getNumberOfPages();
doc.deletePage(pageCount)
doc.save("download.pdf");
}
});
}

this is the pdf file:
downloaded.pdf

[HackbrettXXX]

Please attach the PDF document.

[stounej]

I have edited my post and included the pdf document, this is the code rendered in the pdf document:

import` '../App.css;
import personalInfo from '../Contexts/personalInfo';
import Grid from '@material-ui/core/Grid';
import {Typography} from '@material-ui/core';
import clsx from 'clsx';
import {makeStyles} from '@material-ui/core/styles';

const useStyles = makeStyles({
  paragraphes: {
    fontSize: "12px",
    overflow: "hidden",
    whiteSpace: "pre-wrap"
  },
  Typography: {
    textAlign: "center"
  },
  title: {
    fontSize: "20px",
    marginTop: "45px",
    textAlign: "center",
    fontFamily: "bold",
    backgroundColor: "#96b0bc",
    color: "white"
  },
  dates: {
    marginTop: "40px",
    fontSize: "12px",
    marginLeft: "13px"
  },
  h4: {
    fontSize: "15px",
    fontWeight: "bold",
    marginBottom: "8px",
    marginTop: "10px"
  }
});

//width: "21cm",height:"29.7cm"{width: "248.0px",height:"350.8px"
function PaperA4() {
  const classes = useStyles();
  return (
    <div class="page" data-size="A4" id="cv">
      <personalInfo.Consumer>
        {({
          fullname,
          email,
          phone,
          address,
          zip,
          city,
          country,
          driving,
          status,
          nationality
        }) => (
          <Grid container xs={12} direction="column" justify="center">
            <Grid
              item
              xs={12}
              justify="center"
              alignItems="center"
              style={{
              lineHeight: "5px",
              marginTop: "20px"
            }}>
              <Typography align="center" variant="h5">{fullname}</Typography>
            </Grid>
            <Grid item xs={12}>
              <Typography className={clsx(classes.Typography, classes.paragraphes)}>
                {email}&nbsp; {phone}&nbsp; {address}
                &nbsp; &nbsp; {city}
                &nbsp; {country}
                &nbsp; {nationality}
                &nbsp; {status}
                &nbsp; {zip}
                &nbsp;{driving}
              </Typography>
            </Grid>

          </Grid>
        )}
      </personalInfo.Consumer>
      <Grid container xs={12} direction="column" justify="center">
        <Typography className={classes.title} variant="h5">Professional Experience
        </Typography>
        <personalInfo.Consumer>
          {({experience}) => (experience.map((exp, i) => {
            return (
              <div key={i}>
                <Grid container xs={12} spacing={false}>
                  <Grid xs={3}>
                    <Typography className={classes.dates}>
                      {exp.startdate}-{exp.enddate}<br/> {exp.city},{exp.country}
                    </Typography>
                  </Grid>
                  <Grid xs={8}>
                    <Typography className={classes.paragraphes}>
                      <Typography className={classes.h4}>
                        {exp.job}
                        <br/> {exp.employer}
                      </Typography>
                      {exp.description}
                    </Typography>
                  </Grid>
                </Grid>
              </div>

            )
          }))}
        </personalInfo.Consumer>
      </Grid>
      <Typography className={classes.title} variant="h5">Education
      </Typography>
      <personalInfo.Consumer>
        {({education}) => (education.map((edu, i) => {
          return (
            <div key={i}>
              <Grid container xs={12} spacing={false}>
                <Grid xs={3}>
                  <Typography className={classes.dates}>
                    {edu.startdate}-{edu.enddate}<br/> {edu.city},{edu.country}
                  </Typography>
                </Grid>
                <Grid xs={8}>
                  <Typography className={classes.h4}>
                    {edu.degree}
                    <br/> {edu.school}
                  </Typography>
                  <Typography className={classes.paragraphes}>
                    {edu.description}
                  </Typography>
                </Grid>
              </Grid>
            </div>

          )
        }))}
      </personalInfo.Consumer>

    </div>

  );
}

export default PaperA4;`

[HackbrettXXX]

The performance issue seems to be that each letter is written as a single chunk of text. Why that is, I don't know, yet.

[stounej]

I tried to transform the document to an Image before saving it and it worked but the text inside the pdf can't be copied,
I need the text to be copyable.

[KurtGokhan]

Seems like if there is letter-spacing in CSS, this will happen. Here is the workaround I am using to remove letter-spacing for PDF:

        onclone: async (d: HTMLDocument) => {
          const styleSheet = `
            * {
              letter-spacing: initial !important;
            }
          `;
          const style = document.createElement('style');
          style.innerText = styleSheet;
          d.head.appendChild(style);
        }

[kevinmelo]

Any return? have the same issue

[KurtGokhan]

In addition to letter-spacing, too many words can also cause this issue. When letter-spacing is not 0, each letter is rendered separately. But when it is 0, html2canvas renders each word separately and that still makes the PDF size grow too much and cause performance problems.

I created this PR in html2canvas which significantly improves the performance by rendering multiple words in a line together.