如何计算使用 jsPDF 库创建的 PDF 文档中字符串的长度（以毫米为单位）？

Question

我使用 jsPDF 库创建和打印 PDF 文档。这个库公开了低级别的方法，这些方法没问题，但是我有大量的字段要创建，其中很多都是相似的，我需要创建更高级别的抽象。

例如，我想调用一个 createLabel 函数，而不是这个低级的东西。

var doc = new jsPDF('portrait', 'mm', 'a4');
doc.addFont('Arial', "sans-serif", "normal");

// name
doc.setFontSize(14);
doc.text(10, 19, "name:");
doc.setLineWidth(0.1);
doc.line(25, 19, 100, 19); // meaning x1, y1, x2, y2

// CUI
doc.setFontSize(14);
doc.text(10, 29, "CUI:");
doc.setLineWidth(0.1);
doc.line(21, 29, 100, 29);

// same stuff but use functions instead.
createLabel("name: ", 10,50, 100); // meaning (labelName, x, y, totalWidth) 
createLabel("CUI: ", 10,60, 100);

如您所见，第二组标签的线条没有放在正确的位置。他们太左了。它们的起始位置是根据labelName的长度生成的，这个长度计算失败。我怎样才能使它正常工作？到目前为止的代码是：

function createLabel(name, x, y, totalWidth) {
    //draw name
    doc.setFontSize(14);
    doc.text(x, y, name);

    // draw line
    const nameLength = (measureLength(name)) + 2; 
    doc.setLineWidth(0.1);

        // i want to start the line after the name ends + 2 mm.
        // and end the line in such a way that nameLength + lineLength == totalWidth of the compoenent.

    doc.line(x + nameLength, y, x + totalWidth, y);
}

function measureLength(str) {
    let canvas = document.createElement('canvas'); // in memory canvas.. not rendered anywere..
    let ctx = canvas.getContext("2d")
    ctx.font = "14px Arial";

    let width = ctx.measureText(str).width;

    let mm = ( width * 25.4 ) / 149 // meaning (px * 25.4) / screen DPI
    console.log (mm); 
    return mm; // of course, this calculation turns out wrong..
}

如何使这个measureLength功能正常工作？我找到的大多数解决方案都涉及 DOM，但这是 PDF。

注意：我为 PDF 文档和 canvas 使用相同的字体 ('14px Arial')。 jsPDF live demo. 感谢任何见解，谢谢:)

Answer 1

这可能会解决您的问题：

createLabel(name, x, y, totalWidth) {
   doc.setFontSize(14);
   doc.text(x, y, name);

   // draw line
   const nameLength = (doc.getTextDimensions(name).w / (72 / 25.6) ) + 2;
   console.log('nameLength', nameLength); // todo remove

   doc.setLineWidth(0.1);

   // i want to start the line after the name ends + 2 mm.
   // and end the line in such a way that nameLength + lineLength == totalWidth of the compoenent.

   doc.line(x + nameLength, y, x + totalWidth, y);
}

检查我是如何计算的 nameLength - 使用内置的 jsPDF 函数并转换为 mm。有用的链接：

how to calculate text size

why sometimes calculation might be wrong by few pixels

这是结果：

请记住，您使用 x + totalWidth 作为线宽，因此与顶部的手动示例相比，线长 x

如何计算使用 jsPDF 库创建的 PDF 文档中字符串的长度（以毫米为单位）？

How to calculate the length in mm of a string in a PDF document created with jsPDF library?

pdf

pdf-generation

measure

jspdf