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

【问题标题】：jsPDF: justify text with custom fontjsPDF：使用自定义字体对齐文本
【发布时间】：2019-10-24 04:23:55
【问题描述】：

使用 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);

使示例工作。

有人能解决这个问题吗？

【问题讨论】：

我也有同样的问题。添加单字节字体可以解决这个问题，但我认为 jsPDF 不支持它。见stackoverflow.com/questions/46181066/jspdf-justify-text。另一种选择是编写自己的证明代码。我将我的 ttf 字体转换为 type 1 字体，但 jspdf 无法导入这个

标签： javascript pdf-generation jspdf

【解决方案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;
}

【讨论】：