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]

Hi @Snehal13,

I can see an error in the server code:

On the Server Side, you have:

gr.addQuery('sys_id', attach);

This should be:

gr.addQuery('table_sys_id', attach);

i,e, looking at the wrong column.

Side note, you need to add the table_Sys_id column to the list to get it i.e. don't right click and use "Copy Sys_id"

I corrected this problem and it worked but seems to work better in Firefox and not Chrome.

I recommend you use my second set of code that works in both:

I have updated it for you with your sys_id and variable.

HTML Code:

<object data="{{data.final_string}}" type="application/pdf" height="100%" width="100%" class="internal"></object>

Server Code:

(function() {
	var attach = '99e44c6797bb7910d8a97c9fe153af44';
	var gr = new GlideRecord('sys_attachment');	
	gr.get('table_sys_id', attach);
	var sa = new GlideSysAttachment();
	var baseString = GlideBase64.encode(sa.getBytes(gr));

	data.final_string = "data:application/pdf;base64,"+baseString;
})();

Let me know how you get on.

Kind Regards

Ashley

[Snehal13]

Thanks Ashley. this works now but only on FireFox. It does not embed PDF on portal widget for Chrome and Edge browser.

[Ashley]

Glad you got it working, did you use my code? I have tested this in Chrome, Firefox, Edge and it displays the PDF.

Also note that Chrome seems to have a 2MB size limit, how big is your PDF? the smaller the better.

Kind Regards

Ashley

[Snehal13]

Yes. I did use your code. and my PDF size is less than 2 mb. it works on Firefox but not on Chrome and Edge

[Snehal13]

It works in FF but not in Chrome or Edge. My PDF is below 1 MB. The page renders blank with no PDF preview pane