theme: smartblue
一、下载
DevExpress 下载地址: https://docs.devexpress.com/XtraReports/400128/product-information/devexpress-reporting-installer
二、创建报表
选择你要放置的文件夹，依次选择 “Add”， “New Item...”
第一次显示时可能没有详情页面，点击右下角 “Show All Template”
选择 “Blank” 模板 
三、添加工具栏
若工具栏没有显示，可以按下 “ctrl + alt + x” 呼出
还有一些其他工具栏可从上方 XtraReports 中选择
四、 绑定 Json 格式数据源
点击右上方小正方形添加数据源
将你自己的 json 数据粘贴到下方，它会自动解析为对象 
添加完毕后拖动数据制作报表
点击下方按钮即可预览
下列代码是将查询的数据转化为 json 作为数据源制作报表，并以byte数组的形式返回前端
public byte[] GetOrderConfirmationReport(string buid, string orderInfos){// 执行数据查询 OrderInfo orderInfo = GetOrderById(buid, orderInfos);// 转化为 json 字符串string queryResult = JsonConvert.SerializeObject(orderInfo);// 绑定数据源XtraReport1 report = new XtraReport1(){DataSource = CreateDataSourceFromText(queryResult),};// 指定pdf格式PdfExportOptions pdfOptions = report.ExportOptions.Pdf;// Specify the quality of exported images.pdfOptions.ConvertImagesToJpeg = false;pdfOptions.ImageQuality = PdfJpegImageQuality.Medium;// Specify the PDF/A-compatibility.pdfOptions.PdfACompatibility = PdfACompatibility.PdfA3b;// 指定pdf标题，这个参数影响前端的标题显示！！！pdfOptions.DocumentOptions.Title = "Order Confirmation Report";string fileName = DateTime.Now.ToString("yyyy-MM-dd_HH-mm-ss");string pdfPath = $".\Downloads\{fileName}.pdf";// 将报表导出到指定目录下report.ExportToPdf(pdfPath);// 读取报表内容，转化为byte[]byte[] res = GetSignaturePDFByte(pdfPath);// 删除报表File.Delete(pdfPath);return res;}private JsonDataSource CreateDataSourceFromText(string json){var jsonDataSource = new JsonDataSource();// Specify the object that retrieves JSON data.jsonDataSource.JsonSource = new CustomJsonSource(json);// Populate the data source with data.jsonDataSource.Fill();return jsonDataSource;}private static byte[] GetSignaturePDFByte(string srcPdfFile){using (FileStream fsRead = new FileStream(srcPdfFile, FileMode.Open, FileAccess.Read, FileShare.Read)){int fsLen = (int)fsRead.Length;byte[] hebyte = new byte[fsLen];fsRead.Read(hebyte, 0, hebyte.Length);return hebyte;}}
}导出参数可参考：https://docs.devexpress.com/XtraReports/2574/detailed-guide-to-devexpress-reporting/store-and-distribute-reports/export-reports/export-to-pdf
五、测试
Swagger 返回结果如下：
六、前端处理
下列代码的作用是，新建一页并将接收数据转化为pdf显示
const exportConfirmation = ()=>{getOrderConfirmationReport(store.currentBU).then(res=>{var newWindow = window.open("");newWindow.document.body.style.margin = 0newWindow.document.body.innerHTML = '<iframe frameborder="0" style="width:100%;height:100%" src=data:application/pdf;base64,' + res + '>';})
}pdf 内容如下：
