How to implement Print functionality in sitecore 9.1 and SXA 1.8?

Question

I know how to implement print functionality the javascript way and in pure sitecore using controller etc.

I wanted some thoughts on implementing print functionality in SXA. I am using sitecore 9.1 with sxa 1.8.1. My requirement is to print all the content under <main> HTML tag of child pages.

I have an <artciles> node which has <artcile1>...</artcile1><artcile2>...</artcile2> etc as child pages. Each article has its page URL. I need to extract the content from each of the article URL say content under the <main> tag and append the content to the <div> which will be printed on click of 'Print All' button.

I am able to get the content of child articles using the query:

My sample rendered html using the above query looks like:

<div class=”article”>
    <div>article-title1</div>
    <div>article-content1</div>
    <a class=”article-link” href=”/Articles/Article-1”>Read More</a>
</div>
<div class=”article”>
    <div>article-title2</div>
    <div>article-content2</div>
    <a class=”article-link” href=”/Articles/Article-2”>Read More</a>
</div>

<div class=”print-only”></div>

I want to extract the content from<main>div of article 1 page, article 2 page etc from its URL. It means when we hit the URL of article 1 in a separate window and do a viewsource. We can see the div as in below figure.

I need to append all the child article pages <main> content to the <div class="print-only">. And on the click of the 'Print All' button the content will be printed using media queries. Any easy ideas to achieve this?

Answer 1

You can use @media queries present in CSS3 which are now highly supported by browsers nowadays.

Add another node in your Rendering Variant which will be rendered only for print and add all Field Renderers for your child articles (Content) there.

Use similar CSS to show / hide this "print only" content for printing only:

<style type = "text/css">
      @media screen {
         div.print-only {display: none;}
      }

      @media print {
         div.print-only {font-family:georgia, times, serif;}
      }
</style>