Printing KB Article from Service Portal

Gwen Vanderhaeg · ‎02-09-2017

Hi Community!

I am looking for a solution to the following issue:
When end users try to print a KB article from our Service Portal the actual article (widget KB Article Page) gets cut.
You see the "slider" on the right hand side on your print, but of course the idea is to have the entire article printed.

I suppose this can be fixed by editing something in the CSS of this specific widget?

Else I would also find it acceptable to solve as follows:
Put a Link Button on the page with Print Icon and instead forward to "printer friendly" version of the page
kb_view.do?sysparm_article=KBXXXXX

But then in this scenario I don't know how to put the KB article number in the HREF box.

Suggestions?

Thanks in advance!

Gwen

Gaurav Bajaj · ‎03-23-2017

Hello Gwen,

I am pasting the HTML part for the copy of KB Article Widget here. You can remove the printdiv function from client controller part as i haved added it in HTML body itself.

This solution works for me.

<div id="printarea" >

<h4 class="panel-title">{{::data.short_description}}<span class="pull-right">{{::data.number}}</span></h4>

</div>

${Authored by {{::data.author}}}

</span>

${{{::data.sys_view_count}} View}

</span>

<span ng-if="data.sys_view_count > 1" class="views pad-right">

${{{::data.sys_view_count}} Views}

</span>

<sn-day-ago date="data.publishedUtc"/>

</span>

<span ng-if="data.rating > 0 && !data.direct" title="{{::data.rating}} rating">

</span>

</div>

${View or download the attachments below}

</h4>

<sp-attachment-manager table="'kb_knowledge'" sys-id="data.sys_id" omit-edit="true"></sp-attachment-manager>

</div>

</div>

${Article not found}

</div>

<a href="javascript:void(0)" onclick="printDiv('printarea')"> <span class="glyphicon glyphicon-print"></span> Print</a>

<script>

function printDiv(divName) {

var printContents = document.getElementById(divName).innerHTML;

var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;

}

</script>

Please mark it correct if this resolves your concern.

View solution in original post

Stepan Kravciv · ‎09-06-2024

This did not worked for me as the page rendered wrong after printing so I just changed it a bit and refreshed page instead

    c.printArticle = function (divName) {   
        document.body.innerHTML = document.getElementById(divName).innerHTML;
        window.print();
        window.location.reload();
    }

trainer2017 · ‎06-26-2017

Where do you add all this code? Need step by step instructions. Thanks

arshanapalli · ‎01-04-2018

I do have a solution, please check on this:

I see with above solutions we are missing the background color and table border is we have used any.

Solution:

I have used a print button for window print.

In widget HTML:

<img src="images/printer.gifx">Print</img>

</button>

In widget page CSS: (if you don't have a page for your widget please create one to use this solution):

@media print {

section.page {

visibility: visible;

page-break-inside: auto !important;

display: block !important;

width: auto !important;

height: auto !important;

overflow: visible !important;

-webkit-print-color-adjust: exact;

}

Try to print it and you can see the background colors and borders of your custom tables.

My use-case was to view the problems(PRB…) as a table format where I have used a widget to iterate over each problem and view them as a table:

Hope this helps!!!

Thanks,

Harsha.

Phil Feng · ‎06-27-2018

It doesn't seem to work...

Madhurima7 · ‎07-22-2020

Please let me know the server side code as well.