Logo not showing on print window on browser

Using Django Templates & Frontend
1

Hy…
I have an invoice template where i render some data and also show logo, The logo is in the media folder where i upload logo and other company information and when i print invocie i get the logo from logo module,
It is getting logo correctly an di checked its path is also correct. When i don’t open print window then on html template it is showing logo correctly but when i add javascript code for opening print window along with invocie data then it is not showing the logo.

Here is my print button.

<button type="submit" class="btn btn-dark col-sm-4 mb-2" onclick="printInvoiceSingleService('{{ service.id }}')"><i class="fas fa-print text-success me-1" data-bs-toggle="tooltip"
                                    title="Print"></i></button>

and this is my javascript code which renders on view function where all invoice data is fetched and render to the invoice template.

<script>
    async function printInvoiceSingleService(transaction_id) {
    console.log("Print button clicked");
    
    // Make an AJAX request to get the invoice template content
    const response = await fetch(`/printInvoiceSingleService/${transaction_id}/`);
    const invoiceTemplate = await response.text();

    // Open a new tab for printing
    const printWindow = window.open('', '_blank');
    
    // Write the invoice template content to the new tab
    printWindow.document.open();
    printWindow.document.write(invoiceTemplate);
    printWindow.document.close();

    // Trigger the print functionality for the new tab
    printWindow.print();
    
    // Close the new tab after printing
    printWindow.close();
}

// Event listener for beforeprint and afterprint
window.addEventListener('beforeprint', () => {
    // Save the current URL before printing
    window._originalURLBeforePrint = window.location.href;
});

window.addEventListener('afterprint', () => {
    // Return to the original URL after printing is done
    window.location.href = window._originalURLBeforePrint;
});
      </script>

and this is my view function

def printInvoiceSingleService(request, transaction_id):
    # Retrieve the transaction data based on the ID
    transaction = get_object_or_404(Transactions, id=transaction_id)

    invoice_number = transaction_id

    # logoData = CompanyLogo.objects.all()
    company_logo_object = CompanyLogo.objects.first()  # Example: Retrieve the first logo in the database

    if not company_logo_object:
        # Handle the case when no company logo is found
        company_logo_name = 'static/images/digi.png'  # Default logo image path
    else:
        company_logo_name = company_logo_object.companyLogo.name
        print("company_logo_name",company_logo_name)
    # You can customize this template as per your needs
    context = {
        'transaction': transaction,
        'invoice_number':invoice_number,
        # 'logoData':logoData,
        'company_logo_name':company_logo_name,
        # 'company_logo_object':company_logo_object,
    }
    print("context",context)
    # Render the HTML template for the invoice
    return render(request, 'pages/single_service_invoice.html', context)

and i am showing logo in this way on invoice templates

<img src="{{ request.scheme }}://{{ request.get_host }}/media/{{ company_logo_name }}" alt="Company Logo">
2

Is the print window actually making a separate request for the logo? (Check the server logs to see if there is a request for that file being made.)

You may also want to check the browser’s console log to see if there are any errors being reported there as well.

Are there any other images that need to be shown in the print window? If so, are they working? Or is it a case that no image is working?

I can see where you’re retrieving the page as an ajax request - my guess is that by “writing” to the document, the browser is not making the follow-up requests for ancillary data such as images.
(I’m not used to doing this that way - normally, I just pass the url to the window.open call and allow the new window to perform the page retrieval.)

3

Yes, i am fetching logo from CompanyLogo model and then use it in the invoice template.
I have checkd but there is no errors in console, when i just open template without rendering it to print window and check for image url in console then its fine and shown correct image url and also image is shown on front end.
I am showing just one image, but there are some icons(Bootsrap icons) and these are shown correctly.
is this method window.open is correct for retrieving images and how we use that.

4

You have:

I believe you should be able to replace that with:

    // Open a new tab for printing
    const printWindow = window.open(`/printInvoiceSingleService/${transaction_id}/`, '_blank');