0

I have an HTML page that has some texts, a checkbox element, and a button to generate the HTML to PDF.

the checkbox control whether the text element will be shown or hidden in the HTML page using JavaScript

my question is: how to reflect this in the generated PDF? how to hide the element from the PDF if the checkbox is checked?

I tried to use one JS file but it didn't work.

*I'm using WeasyPrint in Django to generate the PDF file This is the HTML code for the PDF 

{% load i18n %}
{% load static %}

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'barcode-print.css' %}">
</head>
<body>
    <section data-controller="barcode-page" id="first-section">

        <span>
            {{ ticket.number }}
        </span>
    </section>
    <section>
        <span>
            {{ ticket.created|convert_date:True }}
        </span>
    </section>

    <section>
        <span id=“showHideinfo”>
      
        </span>
        <label>
            {% trans  'attachments' %}:
        </label>
    </section>

    <section id="ticket">

        <p>
            {{ tichket.number }} 
        </p>
    </section>

</body>

</html>

This is the HTML page which has generate PDF button:

{% load i18n %}
{% load staticfiles %}
{% load correspondence_tags %}
{% load guardian_tags %}
{% block child %}

<div data-controller="barcode-page">

        <div class="barcode-page-section1">

        
            <div class="barcode-tickets-number">
                {{ ticket.number }}
            </div>

            <div class="barcode-corres-date-label">
                {% if correspondence.class_name_en == 'GeneralOutboundCorrespondence' %}

                <label><strong> {% trans 'corres_outbound_date' %}:</strong></label>

                {% else %}
                <label><strong> {% trans 'entity_outbound_date' %}:</strong></label>
                {% endif %}

            </div>
            <div class="barcode-corres-attachment-label" data-target="barcode-page.attachmentslabelDiv">
                <label><strong> {% trans  'attachments' %}:</strong></label>
            </div>

            <div class="barcode-corres-attachment" data-target="barcode-page.attachmentsInfoDiv">
  
            </div>
        </div>

        <div class="barcode-page-section2">

            <div class="barcode-img-element">
                <svg>
                    {{ form.instance.barcode }}
                </svg>
            </div>

            <div class="barcode-checkbox-element">
                <input class="barcode-checkbox" type="checkbox" data-action="barcode-page#showHideAttachments"
                    id="id_barcode_checkbox" checked data-target="barcode-page.attachmentsCheckbox">
                {% trans 'Show attachments in barcode'%}
            </div>

            <div class="barcode-button-element">
                {% if correspondence %}
                <a target="_blank" href="{% url ’ticket:barcode-print' pk=ticket.id  %}"
                    class="btn btn-primary barcode-button" id="barcode-pdf-button"
                    data-target="barcode-page.barcodeToPDFButton">
                    {% trans 'print' %}
                </a>
                {% endif %}
   
        </div>

    </div>


</div>
{% endblock %}

and this is the Django view:

class BarcodePrintView(LoginRequiredMixin, DetailView, DeleteView):
model = Correspondence
context_object_name = 'ticket'


class BarcodePrint(WeasyTemplateResponseMixin, BarcodePrintView):
    pdf_stylesheets = [
        settings.STATIC_ROOT + '/main.css',
    ]
    template_name = 'tickets/barcode_print.html'
NesuGH
  • 79
  • 1
  • 2
  • 12
  • What exactly is the problem? If your selection of elements to hide already works using a checkbox, can't you use CSS `display: none` or use JavaScript `element.remove()`? – Denis G. Labrecque Dec 27 '19 at 02:41
  • A simple hack is on checkbox `click` just add a class name `hidden` and using media print quires hide that class like `@media print { .hidden {display:none;} }` so this only hide for print when it has class `hidden` – Awais Dec 27 '19 at 05:45
  • But how can I access the element from the PDF HTML to add the class? as I noticed it can't execute the Javascript code when loading this page @Awais – NesuGH Dec 27 '19 at 08:09
  • @DenisG.Labrecque The problem is based on an event in an HTML page I want some element to be hidden in another HTML PDF page, but apparently the PDF HTML page can't execute JS code! – NesuGH Dec 27 '19 at 08:11
  • check this out: https://stackoverflow.com/questions/39893123/execute-javascript-and-css-in-django-template apparently there is no way to do it directly – NesuGH Dec 27 '19 at 08:33

0 Answers0