一、下载
DevExpress 下载地址: docs.devexpress.com/XtraReports...
二、创建报表
选择你要放置的文件夹,依次选择 "Add
", "New Item...
"
第一次显示时可能没有详情页面,点击右下角 "Show All Template
"
选择 "Blank
" 模板
三、添加工具栏
若工具栏没有显示,可以按下 "ctrl + alt + x
" 呼出
还有一些其他工具栏可从上方 XtraReports
中选择
四、 绑定 Json 格式数据源
点击右上方小正方形添加数据源
将你自己的 json 数据粘贴到下方,它会自动解析为对象 添加完毕后拖动数据制作报表
点击下方按钮即可预览
下列代码是将查询的数据转化为 json 作为数据源制作报表,并以byte数组的形式返回前端
csharp
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;
}
}
}
导出参数可参考:docs.devexpress.com/XtraReports...
五、测试
Swagger 返回结果如下:
六、前端处理
下列代码的作用是,新建一页并将接收数据转化为pdf显示
ini
const exportConfirmation = ()=>{
getOrderConfirmationReport(store.currentBU).then(res=>{
var newWindow = window.open("");
newWindow.document.body.style.margin = 0
newWindow.document.body.innerHTML =
'<iframe frameborder="0" style="width:100%;height:100%" src=data:application/pdf;base64,' + res + '>';
})
}
pdf 内容如下: