2013年1月10日 星期四

條碼製作

條碼產生的方法有許多種,常見的方法有:

  • 字型
  • 第三方服務:透過網址產生條碼圖片
  • 使用Libary:
    • Barcode Rendering Framework(barcoderender.codeplex.com)
      • Code 11,Code 25,Code 39,Code 93,Code 128
      • Code EAN 13,Code EAN 8
      • Code PDF417
      • Code QR

範例:

<p>private string GetBarcodeImage(string CODE,int BarHeight) <br>{<br>try<br>{<br>BarcodeSymbology b = BarcodeSymbology.CodeEan13;<br>Image img = BarcodeDrawFactory.GetSymbology(b).Draw(CODE, BarHeight,1);<br>return Convert.ToBase64String(UtilityUI.ImageToBuffer(img, System.Drawing.Imaging.ImageFormat.Jpeg));<br>}<br>catch (Exception ex)<br>{<br>return ex.ToString();<br>}<br>}<br></p> <p>/// <summary><br>/// 將 Image 轉換為 Byte 陣列。<br>/// </summary><br>/// <param name="Image">Image 。</param><br>/// <param name="imageFormat">指定影像格式。</param> <br>public static byte[] ImageToBuffer(Image Image, System.Drawing.Imaging.ImageFormat imageFormat)<br>{<br>if (Image == null) { return null; }<br>byte[] data = null;<br>using (MemoryStream oMemoryStream = new MemoryStream())<br>{<br>//建立副本<br>using (Bitmap oBitmap = new Bitmap(Image))<br>{<br>//儲存圖片到 MemoryStream 物件,並且指定儲存影像之格式<br>oBitmap.Save(oMemoryStream, imageFormat);<br>//設定資料流位置<br>oMemoryStream.Position = 0;<br>//設定 buffer 長度<br>data = new byte[oMemoryStream.Length];<br>//將資料寫入 buffer<br>oMemoryStream.Read(data, 0, Convert.ToInt32(oMemoryStream.Length));<br>//將所有緩衝區的資料寫入資料流<br>oMemoryStream.Flush();<br>}<br>}<br>return data;<br>}<br><br>//====<br></p><p><Image Name="ImgCode"></p><p>&nbsp; <Source>Database</Source></p><p>&nbsp; <Value>=System.Convert.FromBase64String(Fields!CODEIMG.Value)</Value></p><p>&nbsp; <MIMEType>image/png</MIMEType></p><p>&nbsp; <Style></p><p>&nbsp; &nbsp; <Border></p><p>&nbsp; &nbsp; &nbsp; <Style>None</Style></p><p>&nbsp; &nbsp; </Border></p><p>&nbsp; </Style></p><p></Image></p>

如何使用LocalReport - WebForm (3)


實作部分,報表繫結與報表下載

/// 
        /// 報表繫結
        /// 
        /// 報表檢視器
        /// 資料集名稱
        /// 報表路徑
        /// 繫結之資料表
        public static void ReportBind(
            ReportViewer rpt, 
            string dsName, 
            string RptPath, 
            DataTable dt)
        {
            //Report存放路徑,EX:~/bin/Report
            string Path = ConfigurationManager.AppSettings["RptPath"].ToString();
            rpt.LocalReport.DataSources.Clear();
            rpt.ProcessingMode = ProcessingMode.Local;
            rpt.LocalReport.ReportPath = 
                HttpContext.Current.Server.MapPath(
                string.Format("{0}\\{1}", Path, RptPath));
            rpt.LocalReport.DataSources.Add(new ReportDataSource(dsName, dt));
            rpt.LocalReport.Refresh();


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// <summary><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// 報表繫結<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// </summary><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// <param name="rpt">報表檢視器</param><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// <param name="dsName">資料集名稱</param><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// <param name="RptPath">報表路徑</param><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// <param name="dt">繫結之資料表</param><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// <param name="PType">PDF,Excel,Word,Image</param><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public static void ReportExport(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ReportViewer rpt, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string dsName, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string RptPath, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DataTable dt, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string PType) <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ReportBind(rpt, dsName, RptPath, dt);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Microsoft.Reporting.WebForms.Warning[] tWarnings;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string[] tStreamids;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string tMimeType;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string tEncoding;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string tExtension;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //呼叫ReportViewer.LoadReport的Render function,將資料轉成想要轉換的格式,並產生成Byte資料<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; byte[] tBytes = <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rpt.LocalReport.Render(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PType, null, out tMimeType, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; out tEncoding, out tExtension, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; out tStreamids, out tWarnings);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //將Byte內容寫到Client<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string DisplayName = <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rpt.LocalReport.DisplayName == "" ? <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "report" : rpt.LocalReport.DisplayName;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (HttpContext.Current.Request.Browser.Browser == "IE")<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DisplayName = <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpContext.Current.Server.UrlPathEncode(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DisplayName);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpContext.Current.Response.Clear();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpContext.Current.Response.ContentType = tMimeType;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpContext.Current.Response.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AppendHeader("Content-Disposition", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String.Format("attachment; filename={0}.{1}", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DisplayName, tExtension));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpContext.Current.Response.BinaryWrite(tBytes);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpContext.Current.Response.End();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
建置或發行時需要注意的設定:

  • 報表相關的DLL需一設定複製到本機為True
  • 報表專案的報表檔,需要也需要設定為複製

image
Web.config設定

  • 報表繫結程式中,取得報表檔的方法會參考此路徑,因為報表專案在發行後會將報表檔案(RDLC)複製到bin目錄下。
  • 在此我們可以將此發行後的檔案隨意搬移,如將檔案移到Report的資料夾,就可以自行定義。
image

顯示報表與下載程式碼如下:

protected void btnShowReport_Click(object sender, EventArgs e)<br>{<br>UtilityUI.ReportBind(<br>this.ReportViewer1<br>,"TB1"<br>,"rpt110.rdlc"<br>, GetReportData()<br>);<br>}
protected void btnDownload_Click(object sender, EventArgs e)<br>{<br>this.ReportViewer1.LocalReport.DisplayName = "訂單明細";<br>UtilityUI.ReportExport(<br>this.ReportViewer1<br>, "TB1"<br>, "rpt110.rdlc"<br>, GetReportData()<br>,"PDF"<br>);<br> }<br>


結果畫面如下:
image

如何使用LocalReport - WebForm (2)

開始建立報表,在Report專案中,加入新項目,選擇 Reporting > 報表

SNAGHTMLc65a43

加入TypeDataSet(資料集),選擇 資料 > 資料集

SNAGHTMLc8be43

在資料集編輯畫面,可以透過伺服器總管新增資料庫table或是自訂table,以下範例為自訂

image

    • 在畫面上按右鍵 加入 DataTable,命名為TB

image

在TB中按右鍵,加入資料行,以下使用者就可自行定義。

image

接著就可以開始進行報表設計

image

在報表編輯畫面上面,使用資料表元件,之後會要求使用者選擇資料集。在此選擇剛剛建立的資料集

  • 名稱:自訂資料集名稱
    • 註:這邊對應dsName
  • 資料來源:建立好的dsReport
  • 可用資料集:TB;dsReport中的DataTable

SNAGHTML11ad78f

設定完成之後畫面如下,資料列即可選到要顯示的欄位

image

2013年1月9日 星期三

如何使用LocalReport - WebForm (1)

 

建立專案架構如下:

image

  • Web參考Data與Report兩個專案

image

  • 並參考DLL層下面的一顆DLL:Microsoft.ReportViewer.ProcessingObjectModel.dll

image

image

  • 另外Web加入參考

image

參考完成後,Web層的參考如下

image

以上設定WinForm雷同,不同處在參考Microsofrt.ReportViewer.WinForms。

在開發報表時,WebForm與WinForm需要ReportViewer才可瀏覽製作完成的報表檔。

image

專案部屬後,要正常瀏覽Report,部署主機需要安裝

報表檢視器2010 可轉散發套件

如今我們參考了

    • Microsofrt.ReportViewerProcessingObjectModel.DLL
    • Microsofrt.ReportViewer.WebForm.DLL

就可避免掉在部署的主機上安裝套件。

如何建立方案

 

點選 檔案>新增專案

image

進入後在左方選擇 其他專案類型 > Visual Studio 方案

  • 若有使用Team總管,可以在右下方勾選[加入至原始檔控制]

image

建立完方案即可建立其他專案

image

再來分別建立兩個類別庫專案,選擇Visual C# > 類別庫。

  • 類別庫名稱為DLL、Data與Report
    • DLL專案:用來存放使用的DLL
    • Data專案:為簡易資料處理層(Data Access Layer),主要用來處理資料庫的溝通(資料存取)。
    • Report專案:用來存放Report檔案

SNAGHTML535236

再來新增Web專案,選擇 Visual C# > ASP .NET Web 應用程式

SNAGHTML5d81ae

建立完成後,整個專案架構如下

image

接著Web專案需參考Data與Report專案,選擇 [加入參考]

image

在專案的部分,點選Data與Report兩個專案

image

建立完成後 Web專案參考的部分會多出Data與Report兩個參考

image

以上簡介方案建立與各個專案之間的相互參考。

2013年1月6日 星期日

LocalReport插入圖片

image

想要在報表中插入圖片,有幾種模式,在此介紹使用來源為資料庫的模式

  • 在影像屬性中設定如下
    • 名稱:自訂
    • 影像來源:資料庫
    • 使用此欄位:在運算式中加入 =System.Convert.FromBase64String(欄位值)
    • image
    • 使用此MIME類型:可選擇image/jpeg,image/png…

SNAGHTML2a4fffd

 

C#:

Byte[] img = GetImageContent();

datatable.rows[0][“IMAGECODE2”]=Convert.ToBase64String(img);

  • 不管影像的格式存放位置在哪裡,實作取得的方法,並且將圖片內容轉為Base64塞入定義好的欄位中。

 

不同於嵌入影像的方式,可以嘗試使用此方式,較有彈性。

2013年1月1日 星期二

JQuery外掛-Google Search

範例: <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"> </p><p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> </p><p><head> </p><p><title>GoogleSearch</title> </p><p><meta http-equiv="imagetoolbar" content="no" /> </p><p><meta http-equiv="Content-Language" content="de" /> </p><p><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> </p><p><link rel="stylesheet" type="text/css" href="css/nurtext.css" media="all" /> </p><p><link rel="stylesheet" type="text/css" href="css/gSearch.css" media="all" /> </p><p><link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> </p><p><!--<script type="text/javascript" src="http://google.com/jsapi?key=ABQIAAAAfN6uj201k4Vercw6FDN-ihT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTmu0D78Qv7-23u5lWPh9d1xNFNPQ"></script>--> </p><p><script type="text/javascript">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; google.load("jquery", "1");</script> </p><p><script type="text/javascript">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; google.load("search", "1");</script> </p><p><script type="text/javascript" src="js/jquery.gSearch-1.0-min.js"></script> </p><p><script type="text/javascript"> </p><p>function showMsg(e) { </p><p>var SearchTxt = $("#txtSearch").val(); </p><p>if (typeof SearchTxt == 'undefined') </p><p>return; </p><p>$("#search-results").gSearch({ </p><p>search_text: '計畫 模具 '+SearchTxt, </p><p>site: '<a href="http://www.etop.org.tw">www.etop.org.tw</a>', </p><p>count: 8, </p><p>pagination: true </p><p>}); </p><p>} </p><p>$(document).ready(function(e){ </p><p>$('#btnSearch').click(showMsg); </p><p>}); </p><p></script> </p><p></head> </p><p><body id="top"> </p><p><div id="center"> </p><p><div id="content"> </p><p><input type="text" id="txtSearch" /> </p><p><input type="button" id="btnSearch" value='Search' /> </p><p><div id="search-results"></div> </p><p></div> </p><p></div> </p><p></body> </p><p></html></p>

  • 引用jquery:jquery.gSearch-1.0-min.js
  • 範例:站內搜尋
    • search_text:搜尋文字
    • site:搜尋的網站
    • count:數目
    • pagination:是否分頁