html2pdf外部图像不显示

Question

I have an MVC app utilizing html2pdf to convert html into a PDF document with javascript. The html that is being converted is a customer invoice with an image of their logo. We utilize Azure Blob storage to store our images. Since Azure blob storage is hosted all our images show by placing the URL of where it is located in Azure blob storage.

I have been able to convert the html to a pdf but the external url images are not displaying in the pdf, just a blank space shows up.

I am receiving this 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.

I have enabled cors, enabled cross origin on the img tag. I have tried changin type: 'png' to jpg and jpeg . All with the same errors.

My code:

 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);*/

    }

Answer 1

May be it´s something related with azure blob access permissions.

I don´t know if it´s your case, but may be that you need to add some information in your header requests as it has been explained on that document.

https://docs.microsoft.com/en-us/rest/api/storageservices/preflight-blob-request