PDF opens a blank chrome tab

Bassie · October 14, 2024, 3:11pm

Hello guys,

Came across PDF download and tried it on one of my pages. However I can't get the PDF actions to do anything. For example PDF.Open() just opens an empty browser tab. I made sure I deleted my ad-blocker completely first and restarted Chrome. Also: is this a good way to share code? See code below.

(structure/order might be a bit weird due to my inexperience, but the rest works).

Followed the steps 1) convert column to PDF 2) add PDF component, with reference to 1). And 3) Added button with click to PDF.Open()

Kind regards,

Bas

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxBootstrap5TableGenerator:{},dmxFormatter:{},dmxBootstrap5Modal:{},dmxDataTraversal:{},dmxBootbox5:{},dmxNotifications:{},dmxTyped:{},dmxBootstrap5Tooltips:{},dmxPdfCreator:{},dmxRouting:{}}" -->
<dmx-pdf-creator id="pdfcreator1" content="#pdfcontent1"></dmx-pdf-creator>
<dmx-serverconnect id="deletePerson" url="/api/person/delete_person"></dmx-serverconnect>
<dmx-notifications id="notifies1"></dmx-notifications>
<dmx-serverconnect id="listPerson" url="/api/person/list_person"></dmx-serverconnect>
<dmx-serverconnect id="singlePerson" url="/api/person/show_person"></dmx-serverconnect>
<div class="container-md">
    <div class="row">
        <div class="col-lg-2"><button id="btn3" class="btn btn-primary mb-2" dmx-on:click="modal_add.show()"><i class="fas fa-plus-circle"></i>&nbsp;Add</button></div>
        <div class="undefined-NaN col-lg-6 text-lg-start">
            <h1 class="text-lg-center text-primary">Persons</h1>
        </div>
        <div class="col text-end">
            <button id="btn4" class="btn btn-secondary" dmx-on:click="pdfcreator1.open()">Download PDF</button>
        </div>
    </div>
    <div class="row">
        <div class="col" id="pdfcontent1" is="dmx-pdf-content">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-sm">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>City</th>
                            <th>Street</th>
                            <th>Postalcode</th>
                            <th>Phone</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat2" dmx-bind:repeat="listPerson.data.query">
                        <tr>
                            <td dmx-text="id"></td>
                            <td dmx-text="name"></td>
                            <td dmx-text="city"></td>
                            <td dmx-text="street"></td>
                            <td dmx-text="postalcode"></td>
                            <td dmx-text="phone"></td>
                            <td dmx-text="email"></td>
                            <td class="text-center w-auto">
                                <button id="btn1" class="btn btn-success btn-sm ms-1 me-1" dmx-on:click="singlePerson.load({id: id});modal_edit.show()" dmx-bs-tooltip="'Edit record'" data-bs-placement="top"><i class="fas fa-edit fa-sm fa-fw"></i></button><button id="btn2" class="btn btn-danger btn-sm" dmx-on:click="singlePerson.load({id: id});modal_delete.show()" dmx-bs-tooltip="'Delete Record'" data-bs-placement="top"><i class="fas fa-trash-alt fa-sm fa-fw" dmx-on:click=""></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal" id="modal_add" is="dmx-bs5-modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Person</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/person/add_person" dmx-generator="bootstrap5" dmx-form-type="horizontal">
                            <div class="form-group mb-3 row">
                                <label for="inp_name" class="col-sm-2 col-form-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inp_name" name="name" aria-describedby="inp_name_help" placeholder="Enter Name">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_city" class="col-sm-2 col-form-label">City</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inp_city" name="city" aria-describedby="inp_city_help" placeholder="Enter City">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_street" class="col-sm-2 col-form-label">Street</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inp_street" name="street" aria-describedby="inp_street_help" placeholder="Enter Street">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_postalcode" class="col-sm-2 col-form-label">Postalcode</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inp_postalcode" name="postalcode" aria-describedby="inp_postalcode_help" placeholder="Enter Postalcode">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_phone" class="col-sm-2 col-form-label">Phone</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inp_phone" name="phone" aria-describedby="inp_phone_help" placeholder="Enter Phone">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_email" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inp_email" name="email" aria-describedby="inp_email_help" placeholder="Enter Email">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" dmx-on:keypress="" dmx-on:click="">Close</button>
                    <button type="button" class="btn btn-primary" dmx-on:click="serverconnectform1.submit();serverconnectform1.reset();notifies1.success('Record added');listPerson.load({});modal_add.hide()">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="modal_delete" is="dmx-bs5-modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete person</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form is="dmx-serverconnect-form" id="serverconnectform2" method="post" action="/api/person/delete_person" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-populate="singlePerson.data.query">
                            <div class="form-group mb-3 row">
                                <label for="inp_id" class="col-sm-2 col-form-label">Id</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="inp_id" name="id" dmx-bind:value="singlePerson.data.query.id" aria-describedby="inp_id_help" placeholder="Enter Id">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_name" class="col-sm-2 col-form-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="delete_inp_name" name="name" dmx-bind:value="singlePerson.data.query.name" aria-describedby="inp_name_help" placeholder="Enter Name">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_city" class="col-sm-2 col-form-label">City</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="delete_inp_city" name="city" dmx-bind:value="singlePerson.data.query.city" aria-describedby="inp_city_help" placeholder="Enter City">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_street" class="col-sm-2 col-form-label">Street</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="delete_inp_street" name="street" dmx-bind:value="singlePerson.data.query.street" aria-describedby="inp_street_help" placeholder="Enter Street">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_postalcode" class="col-sm-2 col-form-label">Postalcode</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="delete_inp_postalcode" name="postalcode" dmx-bind:value="singlePerson.data.query.postalcode" aria-describedby="inp_postalcode_help" placeholder="Enter Postalcode">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_phone" class="col-sm-2 col-form-label">Phone</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="delete_inp_phone" name="phone" dmx-bind:value="singlePerson.data.query.phone" aria-describedby="inp_phone_help" placeholder="Enter Phone">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_email" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="delete_inp_email" name="email" dmx-bind:value="singlePerson.data.query.email" aria-describedby="inp_email_help" placeholder="Enter Email">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" dmx-on:click="serverconnectform2.submit();serverconnectform2.reset();notifies1.success('Record deleted');listPerson.load({});modal_delete.hide()">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="modal_edit" is="dmx-bs5-modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit person</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form method="post" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-populate="singlePerson.data.query" action="/api/person/edit_person" is="dmx-serverconnect-form" id="serverconnectform3">
                            <div class="form-group mb-3 row">
                                <label for="inp_id" class="col-sm-2 col-form-label">Id</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="edit_inp_id" name="id" dmx-bind:value="singlePerson.data.query.id" aria-describedby="inp_id_help" placeholder="Enter Id" readonly="true">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_name" class="col-sm-2 col-form-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="edit_inp_name" name="name" dmx-bind:value="singlePerson.data.query.name" aria-describedby="inp_name_help" placeholder="Enter Name">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_city" class="col-sm-2 col-form-label">City</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="edit_inp_city" name="city" dmx-bind:value="singlePerson.data.query.city" aria-describedby="inp_city_help" placeholder="Enter City">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_street" class="col-sm-2 col-form-label">Street</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="edit_inp_street" name="street" dmx-bind:value="singlePerson.data.query.street" aria-describedby="inp_street_help" placeholder="Enter Street">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_postalcode" class="col-sm-2 col-form-label">Postalcode</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="edit_inp_postalcode" name="postalcode" dmx-bind:value="singlePerson.data.query.postalcode" aria-describedby="inp_postalcode_help" placeholder="Enter Postalcode">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_phone" class="col-sm-2 col-form-label">Phone</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="edit_inp_phone" name="phone" dmx-bind:value="singlePerson.data.query.phone" aria-describedby="inp_phone_help" placeholder="Enter Phone">
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label for="inp_email" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="edit_inp_email" name="email" dmx-bind:value="singlePerson.data.query.email" aria-describedby="inp_email_help" placeholder="Enter Email">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" dmx-on:click="serverconnectform3.submit();notifies1.success('Record changed');listPerson.load({});modal_edit.hide()">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
<meta name="ac:route" content="/persons">

Bassie · October 15, 2024, 11:36am

Update: from googing I got that the number of table headers in the table must match the table data. Otherwise _calcWitdth error in the PDF lib. Causing empty tab eventually. Once fixed, PDF download works fine.

On PDF.open() I still get the error "open PDF in new window blocked by browser" despite removed add blocker. Same in Chrome and Safari. In principal the user should first see what she downloads

Bas

Bassie · October 15, 2024, 12:18pm

Solved PDF.Open() error: added exception in Chrome for <site_ip:port> to allow popups. See Chrome settings.

Thanks and glad it all works!

Bas