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

範例:

private string GetBarcodeImage(string CODE,int BarHeight)
{
try
{
BarcodeSymbology b = BarcodeSymbology.CodeEan13;
Image img = BarcodeDrawFactory.GetSymbology(b).Draw(CODE, BarHeight,1);
return Convert.ToBase64String(UtilityUI.ImageToBuffer(img, System.Drawing.Imaging.ImageFormat.Jpeg));
}
catch (Exception ex)
{
return ex.ToString();
}
}

/// <summary>
/// 將 Image 轉換為 Byte 陣列。
/// </summary>
/// <param name="Image">Image 。</param>
/// <param name="imageFormat">指定影像格式。</param>
public static byte[] ImageToBuffer(Image Image, System.Drawing.Imaging.ImageFormat imageFormat)
{
if (Image == null) { return null; }
byte[] data = null;
using (MemoryStream oMemoryStream = new MemoryStream())
{
//建立副本
using (Bitmap oBitmap = new Bitmap(Image))
{
//儲存圖片到 MemoryStream 物件,並且指定儲存影像之格式
oBitmap.Save(oMemoryStream, imageFormat);
//設定資料流位置
oMemoryStream.Position = 0;
//設定 buffer 長度
data = new byte[oMemoryStream.Length];
//將資料寫入 buffer
oMemoryStream.Read(data, 0, Convert.ToInt32(oMemoryStream.Length));
//將所有緩衝區的資料寫入資料流
oMemoryStream.Flush();
}
}
return data;
}

//====

<Image Name="ImgCode">

  <Source>Database</Source>

  <Value>=System.Convert.FromBase64String(Fields!CODEIMG.Value)</Value>

  <MIMEType>image/png</MIMEType>

  <Style>

    <Border>

      <Style>None</Style>

    </Border>

  </Style>

</Image>

如何使用LocalReport - WebForm (3)


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

/// <summary>
        /// 報表繫結
        /// </summary>
        /// <param name="rpt">報表檢視器</param>
        /// <param name="dsName">資料集名稱</param>
        /// <param name="RptPath">報表路徑</param>
        /// <param name="dt">繫結之資料表</param>
        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();

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

建置或發行時需要注意的設定:
  • 報表相關的DLL需一設定複製到本機為True
  • 報表專案的報表檔,需要也需要設定為複製
image
Web.config設定
  • 報表繫結程式中,取得報表檔的方法會參考此路徑,因為報表專案在發行後會將報表檔案(RDLC)複製到bin目錄下。
  • 在此我們可以將此發行後的檔案隨意搬移,如將檔案移到Report的資料夾,就可以自行定義。
image
顯示報表與下載程式碼如下:

protected void btnShowReport_Click(object sender, EventArgs e)
{
UtilityUI.ReportBind(
this.ReportViewer1
,"TB1"
,"rpt110.rdlc"
, GetReportData()
);
}

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


結果畫面如下:
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

範例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>GoogleSearch</title>

<meta http-equiv="imagetoolbar" content="no" />

<meta http-equiv="Content-Language" content="de" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="css/nurtext.css" media="all" />

<link rel="stylesheet" type="text/css" href="css/gSearch.css" media="all" />

<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

<!--<script type="text/javascript" src="http://google.com/jsapi?key=ABQIAAAAfN6uj201k4Vercw6FDN-ihT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTmu0D78Qv7-23u5lWPh9d1xNFNPQ"></script>-->

<script type="text/javascript">         google.load("jquery", "1");</script>

<script type="text/javascript">         google.load("search", "1");</script>

<script type="text/javascript" src="js/jquery.gSearch-1.0-min.js"></script>

<script type="text/javascript">

function showMsg(e) {

var SearchTxt = $("#txtSearch").val();

if (typeof SearchTxt == 'undefined')

return;

$("#search-results").gSearch({

search_text: '計畫 模具 '+SearchTxt,

site: 'www.etop.org.tw',

count: 8,

pagination: true

});

}

$(document).ready(function(e){

$('#btnSearch').click(showMsg);

});

</script>

</head>

<body id="top">

<div id="center">

<div id="content">

<input type="text" id="txtSearch" />

<input type="button" id="btnSearch" value='Search' />

<div id="search-results"></div>

</div>

</div>

</body>

</html>

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