Adding a picture to a html printout using javascript

Question

I have a sharepoint webpart I am printing using the script below.

The problem is I need to add a a picture to the header of the page it prints that is located at an address. I am trying to modify this but I don't have alot of javascript experience not sure what the syntax is.

Also I would like to specify the image to a specific size and center it is that possible?

I am aware the src is set to "url" I just don't want to share my actual link on here.

   <center>
   <input onclick="javascript:void(PrintWebPart())" type="button" value="Print Proof of Pricing"/>  
</center> 
<script language="JavaScript">
//Controls which Web Part or zone to print
var WebPartElementID = "ctl00_ctl34_g_db6615a7_4c3b_4a14_9bbc_43ce9d63c24d_FormControl0";
var d= new Date();

var elem = document.createElement("img");
elem.setAttribute("src", "url");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Tag");
elem.setAttribute("align", "middle");

//Function to print Web Part
function PrintWebPart()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
//Create html to print in new window
var PrintingHTML = '<HTML>\n<HEAD>\n';
//Take data from Head Tag
if (document.getElementsByTagName != null)
{
var HeadData= document.getElementsByTagName("HEAD");
if (HeadData.length > 0)
PrintingHTML += HeadData[0].innerHTML;
}
PrintingHTML += '\n</HEAD>\n<BODY>\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML +='<div id="imageDiv">\n</div>\n'
PrintingHTML += WebPartData.innerHTML;
PrintingHTML += "Pricing Date: " +d;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n</BODY>\n</HTML>';
//Open new window to print
if (bolWebPartFound)
{
var PrintingWindow = window.open("","View Proof of Pricing",
"toolbar,width=800,height=600,scrollbars,resizable,menubar");
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
PrintingWindow.document.getElementById("imageDiv").appendChild(elem);
// Open Print Window

}
}
</script>

I have modified my code as per suggestion I still am doing something wrong. The Div is adding correctly but image still doesn't show up — M_kul
– M_kul, Commented Aug 18, 2016 at 14:35

Niraj Rajbhandari · Accepted Answer · 2016-08-18 14:57:10Z

0

I believe you can set the image as background to "imageDiv" as

document.getElementById("imageDiv").style["background"]="url(***YOUR_URL***) no-repeat center center";

Note: You do need to give a height to the container as per your need, say

document.getElementById("imageDiv").style["min-height"]="300px";

answered Aug 18, 2016 at 14:57

Niraj Rajbhandari

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding a picture to a html printout using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related