ASP.NET アプリケーションで QR コード入りの PDF を作成する

以前のブログで Windows Forms アプリケーションにて WPF コントロールの XamBarcode を使用する方法をご案内致しました。

今回はウェブ版の ASP.NET アプリケーションで QR コードを取り扱う方法をご紹介します。

Infragistics ASP.NET 製品には、QR コードやバーコードを作成することのできるコントロールがございません。そこで、以前のブログのようにQR コードの作成には Infragistics WPF のコントロールである XamQRCodeBarcode を使用します。今回はさらにその画像を取り込んで PDF ファイルを作成してみたいと思います。PDF の作成には、 Infragistics ASP.NET 製品に含まれる Document ライブラリを使用します。

それでは、完成したアプリケーションをご覧ください。

テキストボックスに文字列を入力して「 Create PDF 」ボタンをクリックすると、、、

このような PDF が生成されました。この QR コードは動的に作成されており、値は先ほど入力した”my test qr”となっています。

今回のアプリケーションは2つのプロジェクトから成り立っています。
ひとつは外部からのインプットデータを使用して XamQRCodeBarcode を通してイメージファイルを生成する WPF のプロジェクト、もう一つは、その exe ファイルを呼び出し、生成されたイメージファイルを使用してPDF ファイルを作成する ASP.NET プロジェクトです。

ホストとなるのは後者の ASP.NET プロジェクトとなります。

それでは、まず WPF プロジェクトから見てみます。

xaml ファイルに XamQRCodeBarcode を配置します。

<ig:XamQRCodeBarcode Name="barcode" Loaded="barcode_Loaded" />

Loaded のタイミングで QR コードのイメージファイルを作成するため、イベントをフックアップしておきます。

次にコードビハインドです。
MainWindow のコンストラクタで、プロジェクトへのインプットデータであるコマンドライン引数( Environment.GetCommandLineArgs() )を使用して XamQRCodeBarcode を生成します。

public MainWindow()
{
	InitializeComponent();
	string[] args = Environment.GetCommandLineArgs();

	this.barcode.Data = args[2];
	this.barcode.Height = 200;
	this.barcode.Width = 200;
	this.barcode.ErrorCorrectionLevel = QRCodeErrorCorrectionLevel.Low;
	this.barcode.BarsFillMode = BarsFillMode.EnsureEqualSize;
}

続いて FrameworkElement から画像ファイルを生成するメソッドを記述します。

public void CreateImage(FrameworkElement element)
{
	string[] args = Environment.GetCommandLineArgs();
	string path = args[1];

	double width = element.Width;
	double height = element.Height;

	RenderTargetBitmap bmpCopied = new RenderTargetBitmap((int)Math.Round(width), 
		(int)Math.Round(height), 96, 96, PixelFormats.Default);
	DrawingVisual dv = new DrawingVisual();

	using (DrawingContext dc = dv.RenderOpen())
	{
		VisualBrush vb = new VisualBrush(element);
		dc.DrawRectangle(vb, null, new Rect(new Point(), new Size(width, height)));
	}

	bmpCopied.Render(dv);

	PngBitmapEncoder encoder = new PngBitmapEncoder();
	encoder.Frames.Add(BitmapFrame.Create(bmpCopied));

	FileStream stream5 = new FileStream(path, FileMode.Create);
	encoder.Save(stream5);

	this.Close();
}

ここでは CommandLineArgs から取得したパスに生成した画像ファイルを書き出しています。

上記のメソッド CreateImage(FrameworkElement) は、XamQRCodeBarcode でフックアップしておいたLoaded イベントで実行します。XamQRCodeBarcode の生成の完了を待って画像ファイルを作成するためです。

private void barcode_Loaded(object sender, RoutedEventArgs e)
{
	CreateImage(barcode);
}

WPF プロジェクトの実装は以上です。

テストを行う際はコマンドライン引数を指定してください。第一引数は QR コードの画像保存先のファイルパス、第二引数は QR コードのデータです。

続いてメインとなる ASP.NET プロジェクトを作成します。

aspx ファイルに、QR コードのデータを入力するための TextBox、PDF ファイルの作成を実行するボタンを配置します。

<asp:Label ID="Label1" runat="server" Text="Label">Enter QRcode Text:</asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</br></br>
<asp:Button ID="Button1" runat="server" Text="Create PDF" OnClick="Button1_Click" />

コードビハインドでは、２つのメソッドを定義します。先ほど作成した WPF プロジェクトを実行して QR コードの画像ファイルを生成するメソッド CreateImage(string) と PDF ファイルを生成するメソッドCreateReport() です。

CreateImage(string) は引数に送られた string をコマンド引数に送りながら WPF プロジェクトの exe を実行します。以下がメソッドの定義です。中で Process インスタンスを生成して実行しています。

private void CreateImage(string data)
{
	string barcode;
	if (data == "")
	{
		barcode = "testBarcodeData";
	}
	else
	{
		barcode = '"' + data + '"';
	}

	string dir = (Server.MapPath("~/Images") + "\\testBarcode.bmp");

	string[] args = { dir, barcode};
	string arg = String.Join(" ", args);

	Process proc = new Process();
	//proc.StartInfo.FileName = "The path to the executable WPF file like this -> 
    //C:\\Users\\username\\Documents\\visual studio 2012\\Projects\\ASP_NET_QRCode\\xamQRBarcode\\xamQRBarcode\\bin\\Debug\\xamQRBarcode.exe"
	proc.StartInfo.Arguments = arg;
	proc.StartInfo.UseShellExecute = false;
	proc.StartInfo.RedirectStandardOutput = true;
	proc.Start();
	proc.WaitForExit(30000);
}

ここで、Process の StartInfo.FileName プロパティには WPF プロジェクトの .exe ファイルへのパスを割り当てる必要があります。.exe ファイルは WPF プロジェクトの bin\Debug フォルダ内にあります。アプリケーションを実行する環境に合わせて、正しいパスを設定してください。

続いて CreateReport() では以下のようにPDFファイルを生成します。

InfragisticsのDocument ライブラリを使用しますので、必要な dll (Infragistics45.WebUI.Documents.ReportsおよびInfragistics45.WebUI.Documents.Core) を Visual Studio の参照設定に追加してください。

private void CreateReport()
{
	Report report = new Report();

	ISection section1 = report.AddSection();

	string dir = (Server.MapPath("~/Images") + "\\testBarcode.bmp");

	Infragistics.Documents.Reports.Graphics.Image img = 
		new Infragistics.Documents.Reports.Graphics.Image(dir);

	IText imageText = section1.AddText();
	imageText.AddContent(img, new Size(200, 200));

	report.Publish(Server.MapPath("~/PDF") + "\\Report.pdf", FileFormat.PDF);
	System.Diagnostics.Process.Start(Server.MapPath("~/PDF") + "\\Report.pdf");
}

QR コードの画像ファイルから Image インスタンスを作成し、Report のセクションに追加しています。生成された PDF ファイルは上記 Report インスタンスの Publish() メソッドで指定されているパス( ASP.NET プロジェクト内の PDF フォルダ)に保存されます。

最後に、これらのメソッドをボタンのクリックサーバーサイドイベントで実行します。

CreateImage(string) には、画面上の TextBox の Text データを送ります。

protected void Button1_Click(object sender, EventArgs e)
{
	CreateImage(TextBox1.Text);

	CreateReport();
}

QR コード入りの PDF を作成するアプリケーションの実装は以上です。

今回のサンプルはこちらからダウンロードいただけます。
(当サンプルは16.2.20162.2045 ( WPF )および16.2.20162.2013( ASP.NET )を使用して作成されました)

今回も最後までお読みくださり、ありがとうございました。