使用 c# + vue 制作 DevExpress 报表

一、下载

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 内容如下:

相关推荐
谈不譚网安6 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板12 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩12 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真18 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
异常君20 分钟前
Java 高并发编程:等值判断的隐患与如何精确控制线程状态
java·后端·代码规范
异常君20 分钟前
Java 日期处理:SimpleDateFormat 线程安全问题及解决方案
java·后端·代码规范
Java水解21 分钟前
Mysql之存储过程
后端·mysql
用户40993225021222 分钟前
Tortoise-ORM级联查询与预加载性能优化
后端·ai编程·trae
bookcman22 分钟前
Seata 部署手册
后端·架构
都叫我大帅哥22 分钟前
《@SpringBootApplication:Spring Boot的"一键启动"按钮,还是程序员的"免死金牌"?》
java·后端·spring