如何在我的 Blazor 服务器应用程序项目上使用 jspdf？

Question

我希望能够使用 jsPDF 将数据从 ReportDetails.razor 页面导出到 PDF。但是，我收到一个错误，指出 jspdf 未定义。这是我使用下面的 exportPDF 的代码：

报告详细信息.razor

    private async Task ExportAsPDF()
    {
        try
        {
            // Call JavaScript function to export PDF
            await JSRuntime.InvokeVoidAsync("exportPDF", update);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error exporting PDF: {ex.Message}");
        }
    }
}

导出PDF.js

export function exportPDF(update) {
    console.log("JavaScript function exportPDF invoked!");

    // Create a new jsPDF instance
    const pdf = new new jspdf.jsPDF();

    // Set document properties (optional)
    pdf.setProperties({
        title: 'Emergency Report',
        subject: 'Incident details',
        author: 'BDRRMO Admin',
        keywords: 'emergency, report',
    });

    // Add content to the PDF
    var content = `
    Report Details:
    Reported By: ${update.Email}
    Date & Time: ${update.DateTime}
    Description: ${update.Description}
    Location: ${update.Location}
    Status: ${update.Status}
    Remarks: ${update.Remarks}
    Responder: ${update.Responder}
    Emergency Medical Responder: ${update.MedicalResponder}
    Time of Departure: ${update.Departure}
    Time of Arrival at the scene: ${update.Arrival}
    Total Response Time: ${update.ResponseTime}
    For Vehicle Accident, the patient is: ${update.VehicleAccident}
    For Fire Incident, the patient is: ${update.Fire}
    For Crime Incident, the patient is: ${update.Crime}
  `;

    pdf.text(content, 10, 10);

    // Save the PDF or open it in a new tab
    pdf.save('Emergency_Report.pdf');

    console.log("PDF generation completed successfully!");
}

我已经将 jspdf javascript 库导入到我的 _Host.hmtl 以及我的 javasrcipt 文件中。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="~/PDFExport.js"></script>

Answer 1

创建 jspdf 的新实例时，exportPDF.js 文件中似乎存在语法错误。问题如下：

 const pdf = new new jspdf.jsPDF();

您有一个额外的新关键字。应该是：

const pdf = new jspdf.jsPDF();

这是您的 exportPDF.js 文件的更正版本：

export function exportPDF(update) {
    console.log("JavaScript function exportPDF invoked!");

    // Create a new jsPDF instance
    const pdf = new jspdf.jsPDF();

    // Set document properties (optional)
    pdf.setProperties({
        title: 'Emergency Report',
        subject: 'Incident details',
        author: 'BDRRMO Admin',
        keywords: 'emergency, report',
    });

    // Add content to the PDF
    var content = `
    Report Details:
    Reported By: ${update.Email}
    Date & Time: ${update.DateTime}
    Description: ${update.Description}
    Location: ${update.Location}
    Status: ${update.Status}
    Remarks: ${update.Remarks}
    Responder: ${update.Responder}
    Emergency Medical Responder: ${update.MedicalResponder}
    Time of Departure: ${update.Departure}
    Time of Arrival at the scene: ${update.Arrival}
    Total Response Time: ${update.ResponseTime}
    For Vehicle Accident, the patient is: ${update.VehicleAccident}
    For Fire Incident, the patient is: ${update.Fire}
    For Crime Incident, the patient is: ${update.Crime}
  `;

    pdf.text(content, 10, 10);

    // Save the PDF or open it in a new tab
    pdf.save('Emergency_Report.pdf');

    console.log("PDF generation completed successfully!");
}

进行此更改后，您的代码应该可以正常运行，而不会出现“jspdf 未定义”错误。