Question

使用jsPDF和自定义字体，使文本对齐的选项似乎不起作用。

一旦删除了自定义字体，这些选项就可以正常工作。

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();
}

正如您在以下小提琴中看到的，对齐不起作用：https://jsfiddle.net/pg7byu80/5/

删除此行：

        doc.setFont(fontShort, fontStyleMedium);

使示例生效。

有人让它起作用吗？

Answer 1

使用javascript函数，可以使用自定义字体对文本进行对齐

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;
}

jsPDF：使用自定义字体对齐文本

1 个答案: