Level 61
Depends on data. For most of my projects, I was able to control what get's printed with CSS.
@media print
{
.some-class-to-note-that-you-do-not-want-to-print-this-element
{
display: none;
}
}
1 like
Jun 18, 2020
5
Level 2
The proper way to print
Hi All,
I'm working on a project, and like all of them there is a lot of printing going on,
I'm using Laravel with vue.js, all the front end work I did it with vue,
I have to print some tables and information almost on every page of my app, sometimes I need to lunch the printing from a modal that is inside a component.
how do you do that in such situations? I tried to use vue-to-html-paper but I wasn't satisfied with it, is there a better way to print with vue js?
Thanks
Level 2
Thank you @bugsysha for your reply, we can do that easily with bootstrap using d-print-none and d-print-display classes, but I have a problem when there is a modal component, this becomes not useful.
Level 61
This one is hard to answer because of all specific cases to your app and a very short description. The best approach is to go and solve issues one by one.
1 like
Level 2
Thank you so much again @bugsysha, I found a way to do on that StackOverflow using iframe, it worked perfectly for my needs and I hope that someone will find it helpful to:
function printDiv() {
let contents = document.getElementById("printable").innerHTML;
let frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
let frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html lang="en"><head><title>Fiche Client</title>');
frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/css/print.css"/>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
Just put some ID for a div and call the function, It will do the trick ;)
4 likes
Level 1
@marouanaf Bro, Thanks, been looking for this for soo long and it works like a charm.
Please or to participate in this conversation.