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 Morning,

This is a nice little solution but doesn't seem to work in the latest version of Chrome, in Firefox it works great with the limitation of the pdf files not being bigger than 5mb.

I seem to be getting an error in the Console Logs:

I had a look around online and seems to be it can't locate the file to load which is odd as it works fine in Firefox.

Here is the code if anyone is interested:

Server Script:

(function() {
	var sysid_record = $sp.getParameter("sys_kb_id");

	var gr = new GlideRecord('sys_attachment');
	gr.addQuery('table_sys_id', sysid_record.toString());
	gr.query();
	if(gr.next()) {
		var sa = new GlideSysAttachment();
		var binData = sa.getBytes(gr);
		var base64 = GlideStringUtil.base64Encode(binData);
		data.base64 = base64;	
	}
})();

HTML Template:

<object data="data:application/pdf;base64,{{data.base64}}"
        type="application/pdf" width="100%" height="100%" class="internal">
  <param name="view" value="fitH" />
</object>

Any ideas?

Kind Regards

Ashley

[Ashley]

Good Morning,

I managed to figure this out in the end, so this error is being generated if the pdf file being viewed is greater than 2MB, I started seeing Time Out errors in the Console Log, looks like this is a setting we can't change in Chrome where you can in Firefox and Edge. It is a bit odd as Firefox doesn't mind as long as the file is not 5MB or more, a great site I found to compress the pdf files for free is https://smallpdf.com/compress-pdf

Hope this helps someone else.

Ashley

[principp1]

Hi, the reason it didn't work is because you were probably copy/paste sys_id of the table, I did the same. You need to copy the sys_id of the file in the sys_attachment table.

[Ashley]

Good Evening,

Sorry for the late reply, just seen this message, it does sometimes work in Chrome... more when it feels like it, the pdf sizes are only 1MB so shouldn't be a problem really, in Firefox it works perfectly.

I am tried updating the code to use the sys_id instead of sys_kb_id but doesn't seem to want to work, would you post your snippet of code? see where I am going wrong.

My instance is on New York so you know

Kind Regards

Ashley

[Ashley]

Good Morning,

I have been able to simplify the code further if anyone is interested:

Server-side:

(function() {
	var sysid_record = $sp.getParameter("sys_kb_id");

	var gr = new GlideRecord('sys_attachment');	
	gr.get('table_sys_id', sysid_record);
	var sa = new GlideSysAttachment();
	var baseString = GlideBase64.encode(sa.getBytes(gr));

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

Html:

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

I have found moving the data url building to the server side makes it a lot more stable when using Google Chrome and not in the HTML on the client side.

For some reason the script insert in the SNow Community Forum does not like double '{ }' so it doesn't show up the value in the html code but works fine with single ones i.e. { }, make sure you use double '{ }' if copying the code above.

Kind Regards

Ashley