Introduction
There are lot of techniques and frameworks available for generating beautiful, intelligent, static and dynamic reports. Here, I am going to show just another technique for printing static reports like payslip, delivery challan, certificates, etc., using svg files.
Technologies Used
Background
The below diagram shows the main idea behind this technique. Let's see in detail.
SVG File - Scalable Vector Graphics
SVG File is a vector file format, which can be organized as XML. In this technique, I use this SVG file as a template for the reports. I manually design the appearance of reports in SVG and place SVG Text elements with unique name to hold report data.
Extracting XML from SVG Template
Now, I have a SVG report template, we have to read this SVG file as XML, for this, I use SVG Rendering Library.
Modifying XML with Report Data
Now we have XML string of the SVG template file. In this XML string, we have to replace the unique place holders with our report data. For example, If we need to show company name in the report, just add a SVG Text element to the SVG document and provide unique content (like #CompanyName
) for this SVG Text element, in order to find out this element in the XML.
So our XML string contains #CompanyName
in it. Replace this #CompanyName
with our actual data. Like this, we can add our report data to the SVG template file.
Rewriting SVG file and Printing PDF Report
After adding report data to the XML string of SVG template, we have to write this XML string as SVG file. After writing the SVG file, we can convert this to PDF using Inkscape command.
Step by Step Instructions
Before proceeding, install Inkscape in your computer.
1. Creating SVG Template
Create a report template using Inkscape, design it according to your needs. In this example, I create Payslip or Pay Advice report. Look at the following image:
This image is an example of SVG template file for Pay Advice report. You can design it the way you want it to be. But you have to be careful in inserting place holders (SVG Text element) and providing unique name for it. According the above image, #EmployeeName
, #EmployeeId
, #GrossSalary
, #OtherIncomes
, #Deductions
, #TotalSalary
are SVG Text elements, which will be the place holders. Providing unique identification name to SVG elements is very helpful in finding those elements while processing it in the code.
2. Create and Setup Project
Create a C# project in Visual Studio (Windows Forms or WPF), and add SVG Rendering library to the project using the following Nuget command.
Install-Package Svg
3. Creating Demo Application
Create a window like the above image and add event for the Print Pay Advice Button.
4. Reading XML from SVG Template
SvgDocument mySvgDocument = SvgDocument.Open(svgFile);
string StringToReplace = mySvgDocument.GetXML();
SvgDocument.Open(string path)
- It opens SVG file from the specified file path. GetXML()
- It gets the XML string
of the provided SVG Document.
5. Replacing Place holders with Data
string ReplacedString = StringToReplace.Replace("#EmployeeName", txtEmpName.Text.Trim())
.Replace("#EmployeeId", txtEmpID.Text.Trim())
.Replace("#GrossSalary", txtGrossSalary.Text.Trim())
.Replace("#OtherIncomes", txtOtherIncomes.Text.Trim())
.Replace("#Deductions", txtDeductions.Text.Trim())
.Replace("#TotalSalary", txtSalaryPayable.Text.Trim());
From the above code, place holders from #EmployeeName
to #TotalSalary
has been replaced with user provided data.
6. Writing XML Back to SVG File
StreamWriter objStreamWriter = File.AppendText(svgFileName);
objStreamWriter.Write(ReplacedString);
objStreamWriter.Close();
The above lines of code write the modified XML string as SVG file.
7. Printing PDF Report
Now, we have created the report with user provided data. It's time to print the PDF report now. To print PDF report from SVG file, here I am just using the Inkscape
command, here is the command:
inkscape -f input_file.svg -A output_file.pdf
By using the above command, we can convert SVG file to PDF file. Note that before using this command, the working directory of the Windows command prompt should point to the Inkscape installation directory. Default Inkscape installation directory is C:\Program Files\Inkscape.
The following code automates the conversion of SVG file to PDF file.
string Command = string.Format("inkscape -f {0} -A {1}",
objSaveFileDialog.FileName,
objSaveFileDialog.FileName.Replace(".svg", ".pdf"));
System.Diagnostics.ProcessStartInfo startInfo =
new System.Diagnostics.ProcessStartInfo("cmd", "/c " + Command);
startInfo.WorkingDirectory = @"C:\Program Files\Inkscape\";
startInfo.UseShellExecute = false;
startInfo.CreateNoWindow = true;
System.Diagnostics.Process process = new System.Diagnostics.Process();
process.StartInfo = startInfo;
process.Start();
8. Sample Output
History