PDF (Portable Document Format) telah menjadi salah satu format yang banyak digunakan dalam dunia dokumen digital. Berbagai industri menggunakan format PDF untuk menghasilkan laporan, faktur, tagihan, dan jenis dokumen bisnis lainnya. Barcode, di sisi lain, telah menjadi bagian penting dari bisnis yang berisi informasi dalam bentuk yang dapat dibaca mesin. Hari-hari ini, Anda bahkan dapat menemukan kode batang pada tagihan dan faktur Anda. Pada artikel ini, saya akan menyajikan kasus penggunaan di mana Anda perlu membuat file PDF dan menyematkan kode batang di dalamnya, misalnya, saat membuat faktur. Untuk demonstrasi, saya akan membuat ASP.NET PDF Editor yang dapat digunakan untuk membuat file PDF dan barcode menggunakan C# dalam aplikasi web ASP.NET Core. Aplikasi web ASP.NET ini akan memiliki beberapa fitur berikut:
- Editor WYSIWYG untuk menulis konten dokumen PDF.
- Opsi untuk menghasilkan kode batang berdasarkan teks yang disediakan.
- Pilihan untuk mengatur simbologi yang diinginkan dari barcode.
Prasyarat untuk Menghasilkan PDF yang memiliki Barcode di ASP.NET
Berikut ini adalah alat dan API yang Anda perlukan untuk membuat ASP.NET PDF Editor yang memiliki fitur barcode.
- Visual Studio 2017 atau lebih baru.
- Aspose.PDF untuk .NET – API .NET PDF.
- Aspose.BarCode untuk .NET – .NET Barcode Generator dan API Pemindai.
Buat ASP.NET PDF Editor dengan Fitur Barcode
Mari kita mulai perjalanan kita dan lihat cara membuat Editor PDF ASP.NET yang memungkinkan untuk menghasilkan PDF dan menyematkan kode batang dengan satu klik.
Buat ASP.NET Core Web Application baru di Visual Studio.
Pilih Aplikasi Web (Model-View-Controller) dari template.
Instal paket Aspose.PDF, Aspose.BarCode dan CKEditor.
Unduh paket CKEditor, ekstrak, dan salin/tempel folder di direktori wwwroot. Anda juga dapat mengintegrasikan salah satu editor HTML WYSIWYG favorit Anda berdasarkan kebutuhan Anda.
Tambahkan skrip berikut di tampilan Views/Home/index.cshtml.
@{
ViewData["Title"] = "PDF Creator";
}
<script src="~/ckeditor/ckeditor.js"></script>
<br />
<form method="post">
<div class="row">
<div class="col-md-12">
<textarea name="editor1" id="editor1" rows="80" cols="80">
Start creating your PDF document.
</textarea>
<br />
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('editor1');
</script>
</div>
<hr />
</div>
<div class="row">
<div class="col-md-12">
<h3>Create a Barcode</h3>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-9 form-horizontal" align="center">
<div class="form-group">
<label class="control-label col-sm-2" for="CodeText">Code Text</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="codeText" id="codeText" placeholder="Code text" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="barcodeType">Symbology</label>
<div class="col-sm-10">
<select name="barcodeType" class="form-control">
<option value="Code128">Code128</option>
<option value="Code11">Code11</option>
<option value="QR">QR</option>
<option value="Pdf417">Pdf417</option>
<option value="Datamatrix">Datamatrix</option>
</select>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12" align="center">
<input type="submit" class="btn btn-lg btn-success" value="Generate PDF" />
</div>
</div>
</form>
- Tambahkan metode berikut di Controllers/HomeController.cs.
[HttpPost]
public FileResult Index(string editor1, string codeText, string barcodeType)
{
// generate a barcode
string barcodeImagePath = Path.Combine("wwwroot/barcodes/", Guid.NewGuid() + ".png");
SymbologyEncodeType type = GetBarcodeSymbology(barcodeType);
BarcodeGenerator generator = new BarcodeGenerator(type, codeText);
generator.Parameters.BackColor = System.Drawing.Color.Transparent;
// set resolution of the barcode image
generator.Parameters.Resolution = 200;
// generate barcode
generator.Save(barcodeImagePath, BarCodeImageFormat.Png);
// create a unique file name for PDF
string fileName = Guid.NewGuid() + ".pdf";
// convert HTML text to stream
byte[] byteArray = Encoding.UTF8.GetBytes(editor1);
// generate PDF from the HTML
MemoryStream stream = new MemoryStream(byteArray);
HtmlLoadOptions options = new HtmlLoadOptions();
Document pdfDocument = new Document(stream, options);
// add barcode image to the generated PDF
pdfDocument = InsertImage(pdfDocument, barcodeImagePath);
// create memory stream for the PDF file
Stream outputStream = new MemoryStream();
// save PDF to output stream
pdfDocument.Save(outputStream);
// return generated PDF file
return File(outputStream, System.Net.Mime.MediaTypeNames.Application.Pdf, fileName);
}
private SymbologyEncodeType GetBarcodeSymbology(string symbology)
{
if (symbology.ToLower() == "qr")
return EncodeTypes.QR;
else if (symbology.ToLower() == "code128")
return EncodeTypes.Code128;
else if (symbology.ToLower() == "code11")
return EncodeTypes.Code11;
else if (symbology.ToLower() == "pdf417")
return EncodeTypes.Pdf417;
else if (symbology.ToLower() == "datamatrix")
return EncodeTypes.DataMatrix;
else
return EncodeTypes.Code128; // default barcode type
}
private Document InsertImage(Document document, string barcodeImagePath)
{
// get page from Pages collection of PDF file
Aspose.Pdf.Page page = document.Pages[1];
// create an image instance
Aspose.Pdf.Image img = new Aspose.Pdf.Image();
img.IsInLineParagraph = true;
// set Image Width and Height in Points
img.FixWidth = 100;
img.FixHeight = 100;
img.HorizontalAlignment = HorizontalAlignment.Right;
img.VerticalAlignment = VerticalAlignment.Top;
// set image type as SVG
img.FileType = Aspose.Pdf.ImageFileType.Unknown;
// path for source barcode image file
img.File = barcodeImagePath;
page.Paragraphs.Add(img);
// return updated PDF document
return document;
}
- Bangun aplikasi dan jalankan di browser favorit Anda.
Menghasilkan PDF dengan ASP.NET PDF Editor
Berikut ini adalah langkah-langkah sekaligus demonstrasi cara membuat file PDF dan menyematkan kode batang dengan sekali klik.
- Tulis atau salin/tempel konten dokumen PDF di area editor.
- Atur teks kode untuk menghasilkan kode batang.
- Pilih simbologi barcode yang Anda inginkan (lihat semua simbologi barcode yang didukung).
- Klik tombol Hasilkan PDF untuk membuat PDF yang memiliki kode batang.