如何在jsPDF中旋转特定标题？-解网

问：

我在jsPDF中的标题旋转中苦苦挣扎。我想将特定标头旋转 90 度，我已经阅读了此代码，但我不知道如何在我的代码中使用它。doc.text("-90 degrees rotated", 20, 160, null, -90);

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

如果我想旋转标题“Severity”、“Likelihood”和“IRPN”，我应该在哪里执行 doc.text（）？

我想实现这一点：

您推荐哪个库来生成 PDF？我正在使用 pdfmake，但它确实很有限，您必须为简单的事情做很多解决方法。现在我正在测试 jsPDF，似乎也有必要使用更多解决方法。

javascript jspdf-autotable

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;

}

此代码片段假定标头“Severity”、“Likelihood”和“IRPN”位于连续列中。根据您的布局调整 xPosition 和其他参数。

关于您关于 PDF 生成库的第二个问题，jsPDF 是 JavaScript 中客户端 PDF 生成的热门选择。它在功能和易用性之间提供了良好的平衡。但是，如果您觉得它太麻烦或不符合您的特定要求，您可能需要考虑探索其他库，例如 pdfmake、pdf-lib，甚至是服务器端解决方案，例如 wkhtmltopdf 或带有无头 Chrome 的 Puppeteer。每个库都有其优点和缺点，因此最佳选择取决于您的具体用例和偏好。

欢迎（回来）来到 Stack Overflow！请注意，即使您事先审查了这些内容，也不允许使用 AI 工具（例如 ChatGPT）来生成或改写您在 Stack Overflow 上发布的内容。另请参阅有关此主题的相关帮助。我们希望您能坚持下去，并在未来贡献自己的优质答案和问题，成为社区的宝贵成员！

上一个：Netbeans 和 phpunit，如何设置每个项目的 php 版本

下一个：如何使用 jsPDF Autotable 钩子为每个元素显示 2 行

如何在jsPDF中旋转特定标题？

How can I rotate specific headers in jsPDF?

评论

评论