jsPDF를 사용하여 텍스트 정렬 오른쪽

Question

jsPDF을 사용하여 클라이언트 측에서 PDF를 만들고 있는데 텍스트의 색상, 크기 및 글꼴을 변경하는 속성이 있지만 텍스트를 오른쪽으로 정렬해야합니다. . 그래서 그것은 모두 올바른 좌표로 정렬됩니다. 텍스트 정렬의 종류 : 오른쪽; CSS에서. 이 일을 어떻게 하죠?

감사

Answer 1

나는 텍스트 정렬을 할 수 있습니다 다시 잠시 jsPDF하는 확장을 작성 (기본적으로 대신 임의의 물건 jsPDF '하지는 .text 기능으로, 왼쪽 상단 정렬)했다.

코드는 어떤 유형의 주석을 추가하기 위해 TypeScript로 작성되었으므로 어떤 매개 변수가 있는지 확실히 알 수 있습니다.

var splitRegex = /\r\n|\r|\n/g; 
jsPDF.API.textEx = function (text: any, x: number, y: number, hAlign?: string, vAlign?: string) { 
    var fontSize = this.internal.getFontSize() 
     /this.internal.scaleFactor; 

    // As defined in jsPDF source code 
    var lineHeightProportion = 1.15; 

    var splittedText: string[]; 
    var lineCount: number = 1; 
    if (vAlign === 'middle' || vAlign === 'bottom' 
     || hAlign === 'center' || hAlign === 'right') { 

     splittedText = typeof text === 'string' 
     ? text.split(splitRegex) 
     : text; 

     lineCount = splittedText.length || 1; 
    } 

    // Align the top 
    y += fontSize * (2 - lineHeightProportion); 

    if (vAlign === 'middle') y -= (lineCount/2) * fontSize; 
    else if (vAlign === 'bottom') y -= lineCount * fontSize; 


    if (hAlign === 'center' 
     || hAlign === 'right') { 

     var alignSize = fontSize; 
     if (hAlign === 'center') alignSize *= 0.5; 

     if (lineCount > 1) { 
      for (var iLine = 0; iLine < splittedText.length; iLine++) { 
       this.text(splittedText[iLine], 
        x - this.getStringUnitWidth(splittedText[iLine]) * alignSize, 
        y); 
       y += fontSize; 
      } 
      return this; 
     } 
     x -= this.getStringUnitWidth(text) * alignSize; 
    } 

    this.text(text, x, y); 
    return this; 
}; 

일반 스크립트 :

pdf.textEx('Example text', xPosition, yPosition, 'right', 'middle'); 

인쇄 중간 오른쪽 (xPosition, yPosition)에있는 한 텍스트 :이를 사용

var splitRegex = /\r\n|\r|\n/g; 
jsPDF.API.textEx = function (text, x, y, hAlign, vAlign) { 
    var fontSize = this.internal.getFontSize()/this.internal.scaleFactor; 

    // As defined in jsPDF source code 
    var lineHeightProportion = 1.15; 

    var splittedText = null; 
    var lineCount = 1; 
    if (vAlign === 'middle' || vAlign === 'bottom' || hAlign === 'center' || hAlign === 'right') { 
     splittedText = typeof text === 'string' ? text.split(splitRegex) : text; 

     lineCount = splittedText.length || 1; 
    } 

    // Align the top 
    y += fontSize * (2 - lineHeightProportion); 

    if (vAlign === 'middle') 
     y -= (lineCount/2) * fontSize; 
    else if (vAlign === 'bottom') 
     y -= lineCount * fontSize; 

    if (hAlign === 'center' || hAlign === 'right') { 
     var alignSize = fontSize; 
     if (hAlign === 'center') 
      alignSize *= 0.5; 

     if (lineCount > 1) { 
      for (var iLine = 0; iLine < splittedText.length; iLine++) { 
       this.text(splittedText[iLine], x - this.getStringUnitWidth(splittedText[iLine]) * alignSize, y); 
       y += fontSize; 
      } 
      return this; 
     } 
     x -= this.getStringUnitWidth(text) * alignSize; 
    } 

    this.text(text, x, y); 
    return this; 
}; 

는 간단하다.