How can I use window print in modal vue?
11,272
One way to doing this is by creating a clone of the modal and using css to limit visibility of what's printed:
print () {
const modal = document.getElementById("modalInvoice")
const cloned = modal.cloneNode(true)
let section = document.getElementById("print")
if (!section) {
section = document.createElement("div")
section.id = "print"
document.body.appendChild(section)
}
section.innerHTML = "";
section.appendChild(cloned);
window.print();
}
@media screen {
#print {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#print, #print * {
visibility:visible;
}
#print {
position:absolute;
left:0;
top:0;
}
}
Author by
moses toh
Updated on June 13, 2022Comments
-
moses toh almost 2 years
My vue component like this :
<template> ... <b-modal id="modalInvoice" size="lg" title="Invoice"> <Invoice/> <div slot="modal-footer" class="w-100"> <b-btn size="sm" class="float-right" variant="warning" @click="show=false"> <i class="fa fa-print"></i> Print </b-btn> </div> </b-modal> ... <b-btn variant="warning" class="btn-square mt-2" v-b-modal.modalInvoice @click="checkout()"><i class="fa fa-credit-card-alt"></i>Checkout</b-btn> ... </template> <script> ... export default { ... methods: { print() { window.print() } } } </script>
If I click print button, it works. But it displays the entire website. I just want if I click the print button, it only shows the contents of the modal
How can I do it?
-
Tiago Neiva over 5 yearsIts because you are printing the full page with window.print(), You should have a boolean variable to show and hide the modal.
-
moses toh over 5 years@Tiago Neiva What do you mean? I need a spesific answer
-
-
moses toh over 5 yearsIt works. But the appearance is not neat. The modal like this : postimg.cc/image/4dzh7wfe9. The print like this : postimg.cc/image/xgdrarz41. My invoice component like this : pastebin.com/X8wg4Ych
-
moses toh over 5 yearsWhat do you think?
-
Brian Lee over 5 yearsYou'll need to adjust the css in the
@media print
section to match the invoice. Copy the appropriate rules from your modal and it should line up.