Printing contents of container (block)
Can someone help me with this? What I'm trying to do is to offer users the option to print the contents of a block. In this case the description of an Event on the view events page.
What I have works but it prints most of the page. I want to only print the contents on the block.
Snippet #1
I can enter the following into the title field of the event description block.
Event Description <button onclick="window.print(parent)">Print Event Description</button>
Snippet #2
And I will see a Print Event Description button.
This does work but it prints most of the page and I only want to print (only) the contents of the block.
-
Hello @John Curtis !
If I've got you right, you just need to choose the Content option in the Block Layout option.
-
I'm tiring to print only what's inside the block.
As I show in snippet (print)
But using this code it's wanting to print the entire page.
Event Description <button onclick="window.print(content)">Print Event Description</button>
The second snippet (printer) is what it's trying to print.- The entire page.
-
This is how I am adding this code. What might I be doing wrong?
-
It seems you need to create this RAW block on your Event's view page:
<script>
function print_elem(sClass)
{
var oWindow = window.open('', 'PRINT', 'height=480,width=640');
oWindow.document.write('<html><head><title>' + document.title + '</title>');
oWindow.document.write('</head><body >');
oWindow.document.write('<h1>' + document.title + '</h1>');
oWindow.document.write($(sClass).text());
alert($(sClass).text());
oWindow.document.write('</body></html>');
// for IE >= 10
oWindow.document.close();
// for IE >= 10*/
oWindow.focus();
oWindow.print();
oWindow.close();
return true;
}
</script>
<div>
<p>
<a href="javascript:void(0);" onclick="print_elem('.bx-base-profile-entity-content');">Print me!</a>
</p>
</div>
Then make a link like in the example in your necessary place.
-
We are definitely on the right track here. One thing thou. Two windows come up after clicking the Print Me button.
Can you hide the window in the front until needed? The window in the back has the OK button that one must click then it will print the contents of the block as needed.
-
Oops, sorry, delete this line in my code:
alert($(sClass).text());
-
subscribe
-
This works perfectly. Thank you very much.
I had to make some small changes to button because it wouldn't work trying to add it to the Title field. <button onclick="print_elem('.bx-base-profile-entity-content');">Print me!</button>
printer.png 