Tengo un botón Exportar en mi página que está creando un PDF (esta parte funciona). Durante el proceso de exportación, me gustaría deshabilitar algunas entradas o mostrar una superposición para bloquear al usuario para que modifique la página. Estoy usando el siguiente código:
function RenderSelectedChartJsToPDF() { // Option 1 $('.featureInput').attr("disabled", true); $("#fileName").attr("disabled", true); $("#pdfExport").attr("disabled", true); // Option 2 $("#overlay").show(); window.jsPDF = window.jspdf.jsPDF; const pdf = new jsPDF('portrait', 'mm', 'a4', true); //portrait or landscape var currentTopPosition = topMargin; // Initialisation of the working position. RenderPDFHeader(pdf, currentTopPosition); RenderPDFGeneralData(pdf, currentTopPosition); RenderPDFFooter(pdf, footerHight, 1, pdf.internal.pageCount); pdf.save($("#fileName").val() + '.pdf'); // Re-enable input here }El problema es que cuando hago clic en el botón exportar, el PDF se renderiza y al final (cuando comienza la descarga), las entradas se deshabilitan. Me gustaría que la entrada se deshabilite primero y luego comience a construir el PDF.
¿Qué estoy haciendo mal?
Como mencionó @PeterKrebs, el problema parece ser que la biblioteca PDF bloquea el navegador. Usé una función setTimeout para resolver mi problema de la siguiente manera:
function RenderSelectedChartJsToPDF() { $('.featureInput').attr("disabled", true); $("#fileName").attr("disabled", true); $("#pdfExport").attr("disabled", true); setTimeout(() => { RenderPDF(); }, 1000); } function RenderPDF() { window.jsPDF = window.jspdf.jsPDF; const pdf = new jsPDF('portrait', 'mm', 'a4', true); //portrait or landscape var currentTopPosition = topMargin; // Initialisation of the working position. RenderPDFHeader(pdf, currentTopPosition); RenderPDFGeneralData(pdf, currentTopPosition); RenderPDFFooter(pdf, footerHight, 1, pdf.internal.pageCount); pdf.save($("#fileName").val() + '.pdf'); // Re-enable input here }