如何在jsPDF中正确实现文本两端对齐？解决对齐属性失效问题

Hey there! I’ve dealt with this exact jsPDF justify alignment issue before—super frustrating when the setting seems to do nothing. Let’s walk through the fixes that worked for me:

1. First, Update jsPDF to the Latest Version #

Older versions of jsPDF had buggy support for align: "justify", especially when using maxWidth directly in doc.text(). Head over to your package manager and install the latest stable release:

npm install jspdf@latest

This alone fixes most justification issues for me.

2. Pre-Split Your Text with splitTextToSize() #

Sometimes the doc.text() method doesn’t properly parse the text into lines for justification, even with maxWidth set. Instead, pre-split your text into line-sized chunks first using splitTextToSize(), then pass the resulting array to doc.text():

const doc = new jsPDF();
const longText = "Lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet lorem ipsum solor dit samet";

// Split text into lines that fit your maxWidth
const splitLines = doc.splitTextToSize(longText, 190);

// Now pass the split lines to doc.text with justify alignment
doc.text(splitLines, 10, 203, {
  align: "justify",
  lineHeightFactor: 1.5
});

This gives jsPDF clear line boundaries to apply justification to each line (except the last one, which will naturally left-align, as is standard for justified text).

3. Check Your Font Compatibility #

If you’re using a custom font (not the default Helvetica), some fonts don’t include the necessary kerning or spacing data for jsPDF to apply justification correctly. Test with the default font first to rule this out:

// Force default font for testing
doc.setFont("helvetica");
doc.text(splitLines, 10, 203, { align: "justify" });

If justification works with Helvetica, your custom font might need to be replaced or converted to include proper typographic metadata.

4. Manual Justification (Last Resort) #

If none of the above work, you can manually adjust spacing for each line (except the last one). Here’s a quick snippet to get you started:

const adjustLineForJustify = (line, maxWidth, doc) => {
  if (line.trim().split(" ").length <= 1) return line; // Skip single-word lines
  const currentWidth = doc.getTextWidth(line);
  const spaceCount = line.split(" ").length - 1;
  const extraSpace = (maxWidth - currentWidth) / spaceCount;
  return line.split(" ").join(" ".repeat(1) + String.fromCharCode(0x00a0).repeat(Math.floor(extraSpace / doc.getTextWidth(" "))));
};

// Apply to all lines except the last
const justifiedLines = splitLines.map((line, idx) => 
  idx !== splitLines.length - 1 ? adjustLineForJustify(line, 190, doc) : line
);

doc.text(justifiedLines, 10, 203, { lineHeightFactor: 1.5 });

This calculates how much extra space each gap between words needs and adds non-breaking spaces to stretch the line to maxWidth.

内容的提问来源于stack exchange，提问作者Alex Papageorgiou