使用SVG文件生成报告的技巧

在本文中,将展示一种生成静态报告(如工资单、交货单、证书等)的技术,使用SVG文件。将使用SVG(可缩放矢量图形)文件作为报告的模板,并在其中放置带有唯一名称的SVG文本元素以保存报告数据。

使用的技术

以下是实现此技术所涉及的主要技术:

  • SVG - 可缩放矢量图形:一种基于XML的矢量图像格式,用于设计具有可缩放特性的图形。
  • Inkscape:一个开源的矢量图形编辑器,用于创建和编辑SVG文件。
  • SVG渲染库 2.1.0:用于读取和修改SVG文件的库。

下面的图表展示了这种技术背后的主要思想。让详细了解一下。

SVG文件是一种矢量文件格式,可以组织为XML。在这种技术中,使用SVG文件作为报告的模板。手动设计SVG中的报告外观,并放置带有唯一名称的SVG文本元素以保存报告数据。

现在,有一个SVG报告模板,需要将这个SVG文件作为XML读取,为此,使用SVG渲染库。

现在有了SVG模板文件的XML字符串。在这个XML字符串中,需要用报告数据替换唯一的占位符。例如,如果需要在报告中显示公司名称,只需在SVG文档中添加一个SVG文本元素,并为此SVG文本元素提供唯一的内容(如#CompanyName),以便在处理XML时找到这个元素。

在将报告数据添加到SVG模板的XML字符串后,需要将这个XML字符串写为SVG文件。在写入SVG文件后,可以使用Inkscape命令将其转换为PDF。

在继续之前,请确保在计算机上安装了Inkscape。

使用Inkscape创建一个报告模板,并根据需要设计它。在这个例子中,创建了一个工资单或支付建议报告。查看以下图片:

这张图片是工资单报告SVG模板文件的示例。可以按照想要的方式设计它。但是,在插入占位符(SVG文本元素)并为其提供唯一名称时,必须小心。根据上面的图片,#EmployeeName、#EmployeeId、#GrossSalary、#OtherIncomes、#Deductions、#TotalSalary是SVG文本元素,它们将是占位符。为SVG元素提供唯一的识别名称在处理代码时非常有用。

在Visual Studio中创建一个C#项目(Windows Forms或WPF),并使用以下Nuget命令将SVG渲染库添加到项目中。

Install-Package Svg

创建一个窗口,如上面的图片,并为“打印支付建议”按钮添加事件。

C# // Opening svg template document into mySvgDocument SvgDocument mySvgDocument = SvgDocument.Open(svgFile); // Getting xml string from mySvgDocument 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. C# // Replacing placeholders with value 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. C# StreamWriter objStreamWriter = File.AppendText(svgFileName); objStreamWriter.Write(ReplacedString); objStreamWriter.Close(); The above lines of code write the modified XML string as SVG file.

现在,已经创建了包含用户提供的数据的报告。是时候打印PDF报告了。要将SVG文件转换为PDF文件,在这里只是使用Inkscape命令,以下是命令:

inkscape -f input_file.svg -A output_file.pdf

使用上述命令,可以将SVG文件转换为PDF文件。请注意,在运行此命令之前,Windows命令提示符的工作目录应指向Inkscape安装目录。默认的Inkscape安装目录是C:\Program Files\Inkscape。

C# // Inkscape SVG to PDF command: inkscape -f in.svg -A out.pdf string Command = string.Format( " inkscape -f {0} -A {1}" , objSaveFileDialog.FileName, objSaveFileDialog.FileName.Replace( " .svg" , " .pdf" )); // Preparing the command 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();
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485