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.

Can I use html() multiple times in a PDF

See original GitHub issue

I want to export a PDF in a function. At the same time, the content inside is generated by using .html() many times. If only once .html() there is no problem at all. But I found that I used it twice, and the content of the second time would not be generated in PDF. So I want to know,.html() Only once? this is code

async getPdfByJSPDF(){
      // console.log(this.$refs.ProjectDesignReport.changeHeightToA4(),"这里在执行子组件的改变高度函数")
      const { width:A4W, height: A4H } = {width:960,height:1362};
      const { unit, orientation, format } = {unit:"px", orientation:"p", format:[A4H,A4W]} // optionPDF(A4W,A4H);
      // console.log(unit, orientation, format,"unit, orientation, format")

      let thePDF = new JsPDF({ orientation, unit, format });
      thePDF = addSelfFont(thePDF, MyFont, "Alibaba-PuHuiTi-Regular-normal" ); // 增加字体

      const pdfBody = document.querySelector("#export");

      await thePDF.html(pdfBody,{x:0,y:0});
      await thePDF.html(pdfBody,{x:0,y:1362*3});

      const num = thePDF.internal.getNumberOfPages(); // 可以获得页数
      for(let i = 0; i < num; i+=1) {
        thePDF.setPage(i); 
        thePDF.setTextColor("red");
        thePDF.setFontSize(32);
        thePDF.text(`${thePDF.internal.getCurrentPageInfo().pageNumber  }/${  num}`,40,40, );
      }
      thePDF.save();
    }

By the way, we’ve dealt with this problem in other ways, so now we’re just a little curious.

At the same time, if I continue to use html() in html() callback, I can write the content into PDF, but in the way of covering the previous one.

version 2.3.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:18

github_iconTop GitHub Comments

2reactions
ahocevarcommented, Jul 3, 2021

Using html2canvas directly has the disadvantage that text will be converted to an image, whereas using doc.html() preserves text as text. And html-to-image is not an option because of the Safari limitations.

2reactions
joanc-naiacommented, Feb 24, 2021

Yeah, I thought I could use .addPage() after .html() and call .html() again to insert anoter DOM element into a new page. Turns out I can’t. Is there a differrent way to go about doing this?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can I use html() multiple times in a PDF · Issue #3074 - GitHub
I want to export a PDF in a function. At the same time, the content inside is generated by using .html() many times....
Read more >
How to parse multiple HTML files into a single PDF?
We create a single Document and a single PdfWriter instance. We parse the different HTML files into ElementList s one by one, and...
Read more >
Convert HTML/CSS Content to a Sleek Multiple Page PDF File ...
Generate PDF from HTML in div using JavaScript. • Multiple pages with HTML to PDF converters. The questions go on and on. The...
Read more >
Combine or split existing PDF documents - Adobe Support
Working with multiple documents is one of Acrobat's superpowers. You can combine, or merge, almost any file type into one PDF.
Read more >
Repeat PDF Page Content Multiple Times on a Single Page ...
With the PDF containing the content that you want to repeat open in Acrobat, select "Plug-Ins > AutoPagex Plug-in > Repeat Page Content...
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