Tengo una aplicación MVC que utiliza html2pdf para convertir html en un documento PDF con javascript. El html que se está convirtiendo es una factura de cliente con una imagen de su logotipo. Utilizamos Azure Blob Storage para almacenar nuestras imágenes. Dado que el almacenamiento de blobs de Azure está alojado, todas nuestras imágenes se muestran colocando la URL donde se encuentra en el almacenamiento de blobs de Azure.
Pude convertir el html a un pdf, pero las imágenes de la URL externa no se muestran en el pdf, solo aparece un espacio en blanco.
Estoy recibiendo este error:
Access to image at 'https://blob.core.windows.net/images/a5a1032bf7b3b0ae4f70/profile/2064/Transparent_Logo_Blue.png' from origin 'http://localhost:65426' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Habilité cors, habilité el origen cruzado en la etiqueta img. He intentado cambiar el tipo: 'png' a jpg y jpeg . Todos con los mismos errores.
Mi código:
function downloadPDF() { //var element = document.getElementById('invoice'); //html2pdf(element); // Get the element to print var element = document.getElementById('invoice'); // Define optional configuration var options = { filename: 'inv_' + $('#InvoiceMaster_InvoiceNumber').val() + '.pdf', image: { type: 'png', quality: 0.98 }, html2canvas: { scale: 2, allowTaint: false, useCORS: true }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // Create instance of html2pdf class var exporter = new html2pdf(element, options); // You can also use static methods for one time use... options.source = element; options.download = true; /*html2pdf.getPdf(options);*/ }Puede ser algo relacionado con los permisos de acceso de Azure Blob.
No sé si es su caso, pero puede ser que necesite agregar alguna información en sus solicitudes de encabezado como se explica en ese documento.
https://docs.microsoft.com/en-us/rest/api/storageservices/preflight-blob-request