Я создаю pdf-файл на стороне клиента, используя html2canvas и jsPDF. Независимо от того, какие настройки я выбираю, я теряю пробелы в буквах в качестве артефактов при рендеринге html в pdf.

Есть ли настройка, чтобы исправить это? Я просмотрел API-интерфейсы и изменил все возможные настройки, которые я могу придумать, ничего не изменив интервал.

Изображения, показывающие потерю пространства

До (как html в браузере):

После (pdf):

Код

Код использует html2canvas и jsPDF.

 async pdfOrder() {  const doc = new jsPDF({  orientation: "p",  unit: "mm",  format: "a4",  precision: 5  });  const options = {  background: "white",  scale: 3  };   for (let i = 0; i lt; this.numberOfPages; i  ) {  const div = document.getElementById("html2Pdf-"   i.toString());  // create array of promises  await this.addPage(doc, div, options, i);  }   // Name of pdf  const fileName = "XXX.pdf";   // Make file  await doc.save(fileName);  }   private addPage(  doc: jsPDF,  div: HTMLElement,  options: any,  pageNumber: number  ): any {  // return promise of canvas to a page  return html2canvas(div, options).then(canvas =gt; {  // Converting canvas to Image  const imgData = canvas.toDataURL("image/PNG");  // Add image Canvas to PDF  const bufferX = 4;  const bufferY = 4;  const imgProps = (doc as any).getImageProperties(imgData);  const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;  const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;  if (pageNumber gt; 0) {  doc.addPage();  }  doc.addImage(  imgData,  "JPEG",  bufferX,  bufferY,  pdfWidth,  pdfHeight,  undefined,  "FAST"  );  doc.setPage(pageNumber);  const pdfOutput = doc.output();  // using ArrayBuffer will allow you to put image inside PDF  const buffer = new ArrayBuffer(pdfOutput.length);  const array = new Uint8Array(buffer);  for (let i = 0; i lt; pdfOutput.length; i  ) {  array[i] = pdfOutput.charCodeAt(i);  }  });  }  

Добавление ненулевого letter-spacing css, похоже, исправит ситуацию.

 letter-spacing: 0.01px;