Write several texts on the same page with defined Y position

Abierto
  • ¿Algo no está bien?
#1,556 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
tooling

Línea de trabajo

Reproduce el problema con PDFKit 0.15.0 utilizando el ejemplo writeLine proporcionado, centrándose en doc.text, heightOfString y el salto de página causado por una primera columna larga. Rastree cómo cambia el posicionamiento del texto cuando una columna abarca varias páginas. Se considera completado cuando todas las columnas de una fila permanecen alineadas desde la misma página inicial sin superponerse.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Hello ! This question is quite important i'm stuck for a professionnal work.

How can I write several texts on the same page with a defined Y position ?
My goal is to create a table and then write the content of the columns on the same line.
Like this : column1 | column2 | column3

Easy you would say :

export type PDFTableLine = { text: string; width: number }

    private writeLine = (content: PDFTableLine[]) => 
    {
        let offsetX = this.doc.page.margins.left;
        const startY = this.doc.y;
        let maxLineHeight = 0;
    
        //checking what column will be the tallest
        for (let i = 0; i < content.length; i++) {
            const textHeight = this.doc.heightOfString(content[i].text, {
                width: content[i].width,
            });
            maxLineHeight = Math.max(maxLineHeight, textHeight);
        }
        
        //write all the content of columns
        for (let i = 0; i < content.length; i++) 
        {
            this.doc.text(content[i].text, offsetX, startY, {
                width: content[i].width,
            })
    
            offsetX += content[i].width;//set the offset so the next text will be displayed on the next column
        }
    
        //avoid overlap text with setting the next line below the tallest column
        this.doc.y = startY + maxLineHeight;
    
        this.writeLineSeparator(); //basically create a line with stroke()
    }

It's working perfectly ! Unless... If the first text is quite long and pdfkit creates a page to write the rest of the text, then the others column will be displayed on the next page from the Y position from the top of the page. I want all my columns to starts on the same page even if the first text creates a new page. How can I achieve that ?

(Ps: the issue also exist in pdfkit-table package) that's why i'm creating my own class to build tables

  • pdfkit version: 0.15.0
  • Node version: v20.15.1
  • Operating System: Ubuntu linux
Lenguaje dominante
JavaScript
Estrellas
10.7k
Forks
1.2k
Merge medio
22 h 55 min
PR fusionados (30 d)
25

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de foliojs/pdfkit

Todos los issues de foliojs/pdfkit

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.