阿銘隨手Code

前言 

     如題，在專案上有此需求，需將網頁上的部份內容轉成圖片，例如:特定div區塊的資訊。 

這樣類似的Solution之前也有看過類似的，如:IECapt，但它需透過執行檔下Command去轉檔 

，比較不適用直接在網頁上匯出的圖片需求。剛好在Codeplex有找到較符合我的需求的解決 

方法，在此分享給大家。 

SouceCode網址:http://htmlshot.codeplex.com/ 

使用方法: 

下載後會有完整的程式碼及範例，使用重點如下 

1.引用.js <script src="Scripts/HelpersScripts.js" type="text/javascript"></script> 

2.加入一個隱藏欄位 <input id="htmlStringInput" name="htmlStringValue" type="hidden" value=""/> 

3.針對要匯出的內容使用div包住 

4.將div內容在load或匯出的Client事件，先將div內容塞給隱藏欄位 例: 

var myDivContentString = document.getElementById('myDiv').outerHTML;
document.getElementById('htmlStringInput').value = getHtmlString(myDivContentString); 

5.Server端匯出方法: 

System.Drawing.Imaging.ImageFormat bitmatFormat = System.Drawing.Imaging.ImageFormat.Png;
HTMLShot.GetHTMLShot(Page.Request, htmlStringInput.Value, Response.OutputStream, bitmatFormat, width, height);