Print webpart di sharepoint

Mungkin ada yang baru belajar sharepoint seperti saya dan punya keinginan/diminta untuk melakukan print pada webpart. Disini saya akan menulisakan cara saya untuk melakukannya.

Secara garis besar ada 2 langkah untuk melakukannya:
1.Kita harus mendapatkan ID DIV dari webpart yang akan kita print.
2.Kemudian kita mengambil html dari DIV ID yang sudah kita pilih dan kemudian kita print melalui javascript.

OK,biar ga terlalu bingung kita coba praktekan aja ya..hehehe, semoga tidak terlalu membingungkan.

1. Mencari ID DIV dari webpart yang akan kita print, untuk melihatnya kita tinggal tekan F12 di IE atau menggunakan Firebug di Firefox. hasilnya akan seperti ini.

ID webpart

 

 

 

 

 

 

 

 

 

Tanda pen merah itulah ID dari webpart yang akan kita print.

Anda bisa juga mengambil ID tersebut secara behind code seperti:

string webpartId = string.Empty;
string wpId = string.Empty;
wpId = this.ClientID.ToString();
string wp = wpId.Substring(0, (wpId.Length – 6));
webpartId = “MSOZoneCell_WebPart” + wp;

kemudian “webpartId” itulah yang dimasukkan di “WebPartElementID” pada langkah selanjutnya.

2. Jika sudah didapatkan ID DIV kita tinggal masukkan ID tersebut ke function javascript berikut:

function printwebpart() {
var WebPartElementID = “MSOZoneCell_WebPartctl00_m_g_2b77f39c_f908_412e_b451_bd968298f9ba”;
var bolWebPartFound = false;
if (document.getElementById != null) {
//Create html to print in new window
var PrintingHTML = ‘\n\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\n\n’;

var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null) {
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else {
bolWebPartFound = false;
alert(‘Cannot Find Web Part’);
}
}
PrintingHTML += ‘\n\n’;
//Open new window to print
if (bolWebPartFound) {
var PrintingWindow = window.open(“”, “PrintWebPart”, “toolbar,width=800,height=600,scrollbars,resizable,menubar”);
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);
// Open Print Window
PrintingWindow.print();
}
}

3. Silahkan panggil function tersebut, baik dari image atau apapun sesuai kebutuhan. disini akan saya contohkan bila di panggil dari imagebutton:

<asp:ImageButton ID=”Print” onClientClick=”printwebpart()” runat=”server” ImageUrl=”btn_print.png” />

4. Maka anda akan dapat hasil seperti ini:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Sekian semoga bermanfaat.

Tagged , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: