Category Archives: Sharepoint

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