jsPDF: justify text with custom font

问题

With jsPDF and a custom font, the option to justify text doesn't seem to work.

Once you remove the custom font, the options works just fine.

document.getElementById("get-pdf").addEventListener("click",getPDF);

function    getPDF(){
var doc = new jsPDF();

     const helveticaNeueNormalBase64 =
            'AAE...twC3/70=';
        const helveticaNeueMediumBase64 =
            'AAEAAAAPADAAA...CgAAAGAAuQACAAE=';
        const helveticaNeueBoldBase64 =
            'AAEAAAAPADAAAwDAT1...AAIAAQ==';

        const fontShort = 'HelveticaNeue';
        const fontStyleNormal = 'normal';
        const fontStyleMedium = 'medium';
        const fontStyleBold = 'bold';

        const fontNameNormal = 'HelveticaNeue.ttf';
        doc.addFileToVFS(fontNameNormal, helveticaNeueNormalBase64);
        doc.addFont(fontNameNormal, fontShort, fontStyleNormal);

        const fontNameMedium = 'HelveticaNeueMedium.ttf';
        doc.addFileToVFS(fontNameMedium, helveticaNeueMediumBase64);
        doc.addFont(fontNameMedium, fontShort, fontStyleMedium);

        const fontNameBold = 'HelveticaNeueBold.ttf';
        doc.addFileToVFS(fontNameBold, helveticaNeueBoldBase64);
        doc.addFont(fontNameBold, fontShort, fontStyleBold);

        doc.setTextColor(0, 0, 0);
        doc.setFontSize(12);
        doc.setFont(fontShort, fontStyleMedium);
        doc.setFontType(fontStyleMedium);

doc.text('center me much more text than originally entered but this text really really needs to wrap multiple lines so that i can test that feature and the other alignment options',10,10, {align:'justify', maxWidth: 50});

var data = doc.save();
}

As you can see in the following fiddle justification doesn't work: https://jsfiddle.net/pg7byu80/5/

Removing this line:

        doc.setFont(fontShort, fontStyleMedium);

makes the example work.

Anyone got this to work?

回答1:

With a javascript function it is possible to justify text with custom fonts

export function justify(pdfGen: jsPDF, text: string, xStart: number, yStart: number, textWidth: number) {
  text = text.replace(/(?:\r\n|\r|\n)/g, ' ');
  text = text.replace(/ +(?= )/g, '');
  const lineHeight = pdfGen.getTextDimensions('a').h * 1.15;
  const words = text.split(' ');
  let lineNumber = 0;
  let wordsInfo: IWordInfo[] = [];
  let lineLength = 0;
  for (const word of words) {
        const wordLength = pdfGen.getTextWidth(word + ' ');
    if (wordLength + lineLength > textWidth) {
      writeLine(pdfGen, wordsInfo, lineLength, lineNumber++, xStart, yStart, lineHeight, textWidth);
      wordsInfo = [];
      lineLength = 0;
    }
    wordsInfo.push({ text: word, wordLength });
    lineLength += wordLength;
  }
  if (wordsInfo.length > 0) {
    writeLastLine(wordsInfo, pdfGen, xStart, yStart, lineNumber, lineHeight);
  }
}
function writeLastLine(wordsInfo: IWordInfo[], pdfGen: jsPDF, xStart: number, yStart: number, lineNumber: number, lineHeight: number) {
  const line = wordsInfo.map(x => x.text).join(' ');
  pdfGen.text(line, xStart, yStart + lineNumber * lineHeight);
}

function writeLine(pdfGen: jsPDF, wordsInfo: IWordInfo[], lineLength: number, lineNumber: number, xStart: number, yStart: number, lineHeight: number, textWidth: number) {

  const wordSpacing = (textWidth - lineLength) / (wordsInfo.length - 1);
  let x = xStart;
  const y = yStart + lineNumber * lineHeight;
  for (const wordInfo of wordsInfo) {
    pdfGen.text(wordInfo.text, x, y);
    x += wordInfo.wordLength + wordSpacing;
  }
}

interface IWordInfo {
  text: string;
  wordLength: number;
}

来源：https://stackoverflow.com/questions/56515025/jspdf-justify-text-with-custom-font