question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

html: margins have no effect

See original GitHub issue

The documentation and code suggest that the user can set page margins in the html method, but they have no effect. The margin options seem to get lost somewhere.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:14
  • Comments:31 (4 by maintainers)

github_iconTop GitHub Comments

8reactions
datcuemilcommented, Nov 19, 2020

@Jigisha-sublime, I used this as a workaround at least until this issue is fixed and works, and the text is selectable: `const downloadPDF = () => { const content = contentRef.current; if (!content) { return; } const doc = new jsPDF({ orientation: ‘portrait’, unit: ‘pt’, format: ‘a4’, });

const opt = {
  margin: [5, 0, 8, 0],
  filename: `${report.name} - ${moment().format(
    'DD.MMM.YYYY',
  )}.pdf`,
  enableLinks: false,
  pagebreak: {
    avoid: ['tr'],
    mode: ['css', 'legacy'],
  },
  image: { type: 'jpeg', quality: 1 },
  html2canvas: {
    allowTaint: true,
    dpi: 300,
    letterRendering: true,
    logging: false,
    scale: 2,
    scrollX: 0,
    scrollY: 0,
  },
  jsPDF: { doc },
};

html2pdf()
  .from(content)
  .set(opt)
  .toPdf()
  .get('pdf')
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  .then((pdf: any) => {
    const totalPages = pdf.internal.getNumberOfPages();

    for (let i = 1; i < totalPages + 1; i++) {
      pdf.setPage(i);
      pdf.setFontSize(8);
      pdf.text(
        `${i}/${totalPages}`,
        pdf.internal.pageSize.getWidth() - 10,
        pdf.internal.pageSize.getHeight() - 5,
      );
    }
  })
  .save();

}`

hope it helps you as well 😃

7reactions
HackbrettXXXcommented, Oct 20, 2020

@emildatcu I understand that this is frustrating, but please understand that this is a (free!) open source library that’s currently maintained by a single person (me). And I simply don’t have the time to fix everything immediately. Even keeping up with all new issues and pull requests is hard. That’s why it’s open source and everyone can contribute to this project 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS - What to look for when Margin has no effect [duplicate]
If I try and set a top margin on the Download XML anchor, it has no effect at any size. Why could this...
Read more >
html: margins have no effect · Issue #2924 · parallax/jsPDF
The documentation and code suggest that the user can set page margins in the html method, but they have no effect. The margin...
Read more >
margin-right does not work
Consequently, it causes the margin-right property not to have any visual effect. In order to see the effect of margin-right, remove width property...
Read more >
margin - CSS: Cascading Style Sheets - MDN Web Docs
The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code> . Horizontal centering. To center something ......
Read more >
HTML : CSS - What to look for when Margin has no effect
HTML : CSS - What to look for when Margin has no effect [ Beautify Your Computer : https://www.hows.tech/p/recommended. html ] HTML :...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found