How can I rotate specific headers in jsPDF?

Question

I'm struggled with header rotation in jsPDF. I want to rotate specific headers 90 degrees, I've read about this code doc.text("-90 degrees rotated", 20, 160, null, -90);, but I don't know how to use it in my code.

import jsPDF from "jspdf";
import autoTable from 'jspdf-autotable'

class PdfHelper{
    constructor(){}

    buildPdf(){
        var docDefinition = this.buildDocDefinition()
        docDefinition = this.buildTable(docDefinition)
        this.download(docDefinition)
    }

    buildDocDefinition(){
        var docDefinition = jsPDF({
            orientation: 'landscape'
        })
        docDefinition.setFontSize(12);
        docDefinition.setTextColor(0);

        return docDefinition
    }

    buildTable(docDefinition){
        var header = [
            [
                {content: 'Hazard Identification', colSpan: 4, styles: {halign: 'center'}},
                {content: 'Risk Evaluation', colSpan: 4, styles: {halign: 'center'}},
                {content: 'Risk Control', colSpan: 7, styles: {halign: 'center'}},
            ],
            [
                {content: 'Ref', styles: {halign: 'center'}},
                {content: 'Work Activity', styles: {halign: 'center'}},
                {content: 'Hazard', styles: {halign: 'center'}},
                {content: 'Possible Injury / ill-Health', styles: {halign: 'center'}},
                {content: 'Existing Risk Controls', styles: {halign: 'center'}},
                {content: 'Severity', styles: {halign: 'center'}},
                {content: 'Likelihood', styles: {halign: 'center'}},
                {content: 'IRPN', styles: {halign: 'center'}},
                {content: 'Additional Controls', styles: {halign: 'center'}},
                {content: 'Severity', styles: {halign: 'center'}},
                {content: 'Likelihood', styles: {halign: 'center'}},
                {content: 'IRPN', styles: {halign: 'center'}},
                {content: 'Implementation Person', styles: {halign: 'center'}},
                {content: 'Due Date', styles: {halign: 'center'}},
                {content: 'Remarks', styles: {halign: 'center'}},
            ]
        ]

        docDefinition.autoTable({
            head: header,
            headStyles: {
                lineWidth: 0.25
            },
            body: []
        });

        return docDefinition
    }

    download(docDefinition){
        docDefinition.save('demo.pdf');
    }
}

export default PdfHelper

Where should I execute doc.text() if I want to rotate the headers "Severity", "Likelihood" and "IRPN"?

I want to achieve this:

What library do you recommend for PDF generation? I was working with pdfmake, but it is really limited and you have to do a lot of workarounds for simple things. Now I'm testing jsPDF and it seems it is necessary with more workarounds as well.

Answer 1

To rotate specific headers in jsPDF, you can use the doc.text() method with the rotation option. You need to call doc.text() after creating the table to add the rotated headers. In your case, you want to rotate the headers "Severity," "Likelihood," and "IRPN."

Here's how you can modify your buildTable method to achieve this:

buildTable(docDefinition) {
var header = [
    // ... (same as before)
];

docDefinition.autoTable({
    head: header,
    headStyles: {
        lineWidth: 0.25,
    },
    body: [],
});

// Rotate specific headers
const rotatedHeaders = ["Severity", "Likelihood", "IRPN"];
const rotationAngle = -90;
const headerHeight = 10; // Adjust the height based on your needs

rotatedHeaders.forEach((headerText, index) => {
    const xPosition = 20 + index * 30; // Adjust the X position based on your needs
    docDefinition.text(headerText, xPosition, headerHeight, null, rotationAngle);
});

return docDefinition;

}

This code snippet assumes that the headers "Severity," "Likelihood," and "IRPN" are in consecutive columns. Adjust the xPosition and other parameters based on your layout.

Regarding your second question about PDF generation libraries, jsPDF is a popular choice for client-side PDF generation in JavaScript. It provides a good balance between features and ease of use. However, if you find it too cumbersome or if it doesn't meet your specific requirements, you might want to consider exploring other libraries like pdfmake, pdf-lib, or even server-side solutions like wkhtmltopdf or Puppeteer with headless Chrome. Each library has its strengths and weaknesses, so the best choice depends on your specific use case and preferences.