View PDF file in service portal

[Juliana]

I need to embed a PDF file for the user to view inside the page in service portal. I have tried the following, and nothing works.

The iframe downloads the atttachment instead of showing it.

<iframe id="inline_document" scrolling="no" style="width:100%;height:900px;border:none" src="sys_attachment.do?view=true&amp;sys_id=bc039edadbe923008fa34410ba9619b3">
</iframe>

The embed gives error saying it can't load the document.
<embed height="200px" src="/sys_attachment.do?sysparm_referring_url=tear_off&amp;view=true&amp;sys_id=bc039edadbe923008fa34410ba9619b3" type="application/pdf" width="200px"/>

The object gives error saying it can't load the document.
<object data="https://elodev.service-now.com/sys_attachment.do?sysparm_referring_url=tear_off&view=true&sys_id=bc039edadbe923008fa34410ba9619b3" type="application/pdf" width="100%" height="50%">
<p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>


</object>

[Ashley]

Good afternoon,

Are you using a 12 layout within a container? i.e. right click on a widget "Page in Designer" drag a new Column in, 12 layout and then drag the pdf widget into that.

Have you looked at the console logs (F12)? works fine for me in Edge and Chrome.

Maybe paste your latest code if its been changed? attachment still exists in the sys_attachment table and still is a pdf format?

Are you testing this within the Service Portal as I have found in the past the widget preview within the editor doesn't always work as well when compared to the portal itself?

Kind Regards,

Ashley

[Snehal13]

Yes. It is a 12 layout within a container. No error in console logs

PDF embed only works in Firefox and not in Chrome, Edge

HTML of widget is below

  <div>
  <object data="data&colon;application/pdf;base64, {{data.base64}}" type="application/pdf" width="85%" height="90%" class="internal">
    
  <param name="view" value="fitH" /></object>
    
     <object data="data&colon;application/pdf;base64,{{data.final_string}}" type="application/pdf" height="100%" 
        width="100%" class="internal"> </object>
      
</div>  
    <object data="data&colon;application/pdf;base64,{{data.final_string}}" type="application/pdf" height="100%" 
        width="100%" class="internal"> </object>

CSS of widget 

div {
height: 600px;

}

Server script of widget 

(function() {
	
	var attach = '455a5ff597804650d8a97c9fe153af5f'; // sys id of attacgment
	var gr = new GlideRecord('sys_attachment');
	gr.addQuery('sys_id', attach);
	gr.query();
	if(gr.next()) {
		var sa = new GlideSysAttachment();
		//sa.copy('incident','dad58c2b97bb7910d8a97c9fe153afcc','sys_attachment','99e44c6797bb7910d8a97c9fe153af44');
		var binData = sa.getBytes(gr);
		var base64 = GlideStringUtil.base64Encode(binData);
		data.base64 = base64;	
		//data = base64;	
		var sa1 = new GlideSysAttachment();
		var gr1 = new GlideRecord('sys_attachment');
		gr1.get('455a5ff597804650d8a97c9fe153af5f'); //sys_id of your attachment
		var content = sa1.getContentBase64(gr1);
		data.final_string = "data:application/pdf;base64,"+content;
	}


	

})();

[Snehal13]

@Ashley , the above code works only on FF and Edge but not on Chrome. Pls guide

[Snehal13]

the above code works only on FF and Edge but not on Chrome. Pls guide

[Malathimal]

Could you please elaborate on this solution since we had same requirement to display PDF file as open link not to download and view