Search code examples
jspdfhtml2canvashtml2pdf

Bullet points and alphabets are missing when converting html to pdf using jsPDF

I try to convert from html to pdf using jsPDF.

I could not get the pdf as the original html. ordered list and unordered list bullet points are missing in the pdf file.

ordered-list-in-html

ordered-list-in-html

ordered-list-in-pdf

ordered-list-in-pdf

unordered-list-in-html

unordered-list-in-html

unordered-list-in-pdf

unordered-list-in-pdf

function BlazorDownloadFile(filename, text) {
  let parser = new DOMParser();
  let doc = parser.parseFromString(text, "text/html");

  console.log(doc.body);
  const element = doc.body;

  var opt = {
    margin: 1,
    filename: filename,
    html2canvas: { scale: 2 },
    jsPDF: { unit: "cm", format: "a4", orientation: "portrait" },
  };
  // Choose the element that our invoice is rendered in.
  html2pdf().set(opt).from(element).save();
}

Please help me to fix this issue.

Solution

  • Here is a workaround for bullet points in scss you can use to overcome this issue:

     ul li { 
  list-style-type: none; 
  &:before { 
    content: '• '; 
    margin-left: -1em; 
  }
 }