基于Angular 5与.NET Core 2的报表开发技术咨询

嘿，我来给你梳理下在Angular 5 + .NET Core 2的技术栈里实现这类带文本、子报表和图片的报表方案，都是实际项目里验证过的实用路子：

首先得把报表需要的数据结构统一封装，方便前端渲染，同时提供接口给Angular调用：

• 设计通用报表DTO：为了支持子报表嵌套和图片，定义一个可复用的数据传输对象，示例代码：

public class ReportDto
{
    public string Title { get; set; }
    public string Content { get; set; }
    // 子报表用嵌套的同类型列表实现
    public List<ReportDto> SubReports { get; set; }
    // 图片转Base64返回，前端可直接渲染；如果图片过大，也可以返回访问URL
    public string ImageBase64 { get; set; }
    public string ImageAltText { get; set; }
}

• 实现Web API接口：从业务逻辑层或数据库拉取数据，组装成上面的DTO返回，示例控制器代码：

[ApiController]
[Route("api/reports")]
public class ReportController : ControllerBase
{
    [HttpGet("{id}")]
    public IActionResult GetReport(int id)
    {
        // 这里模拟从业务层获取数据，实际项目替换为真实逻辑
        var report = new ReportDto
        {
            Title = "2024年度销售总览",
            Content = "本年度总销售额突破1200万元，同比增长18%，核心产品线贡献占比65%...",
            SubReports = new List<ReportDto>
            {
                new ReportDto
                {
                    Title = "Q4季度销售明细",
                    Content = "Q4销售额350万元，其中XX系列产品占比40%，主要来自华东区域...",
                    ImageBase64 = Convert.ToBase64String(System.IO.File.ReadAllBytes(@"wwwroot/images/q4-sales.png"))
                }
            },
            ImageBase64 = Convert.ToBase64String(System.IO.File.ReadAllBytes(@"wwwroot/images/annual-trend.png")),
            ImageAltText = "年度销售趋势图"
        };
        return Ok(report);
    }
}

注：如果图片体积较大，建议把图片存放在静态文件目录，直接返回/images/annual-trend.png这类访问路径，减少接口响应体积

前端主要负责获取数据后渲染报表，以及实现导出需求：

• 递归渲染报表组件：因为有子报表嵌套，我们可以做一个可复用的报表组件，递归渲染子报表。
  首先写一个报表服务用于请求接口：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface ReportDto {
  title: string;
  content: string;
  subReports: ReportDto[];
  imageBase64: string;
  imageAltText: string;
}

@Injectable()
export class ReportService {
  constructor(private http: HttpClient) {}

  getReport(id: number): Observable<ReportDto> {
    return this.http.get<ReportDto>(`/api/reports/${id}`);
  }
}

然后编写报表组件模板（report.component.html）：

<div class="report-container">
  <h2>{{ report?.title }}</h2>
  <p class="report-content">{{ report?.content }}</p>
  <!-- 渲染图片 -->
  <img *ngIf="report?.imageBase64" 
       [src]="'data:image/png;base64,' + report.imageBase64" 
       [alt]="report.imageAltText" 
       class="report-image">
  <!-- 递归渲染子报表 -->
  <div class="sub-report" *ngFor="let subReport of report?.subReports">
    <app-report [report]="subReport"></app-report>
  </div>
</div>
<button (click)="exportReport()" class="export-btn">导出PDF</button>

组件类（report.component.ts）：

import { Component, Input, OnInit } from '@angular/core';
import { ReportDto, ReportService } from './report.service';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {
  @Input() report: ReportDto;
  fetchedReport: ReportDto;

  constructor(private reportService: ReportService) {}

  ngOnInit() {
    // 根报表从接口拉取数据，子报表通过@Input接收
    if (!this.report) {
      this.reportService.getReport(1).subscribe(data => {
        this.fetchedReport = data;
        this.report = this.fetchedReport;
      });
    }
  }

  // 导出报表为PDF
  exportReport() {
    const reportContainer = document.querySelector('.report-container');
    html2canvas(reportContainer).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgWidth = 210;
      const pageHeight = 297;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      let heightLeft = imgHeight;
      let position = 0;

      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      // 处理分页
      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      pdf.save('sales-report.pdf');
    });
  }
}

注：导出PDF需要先安装依赖：npm install jspdf html2canvas --save

如果需要更复杂的报表格式（比如精确分页、页眉页脚、复杂表格），可以考虑后端直接生成PDF：

• 在.NET Core中使用DinkToPdf库，将HTML模板转换为PDF，前端直接下载生成好的文件。示例代码：

// 先安装DinkToPdf NuGet包
public IActionResult GeneratePdf(int id)
{
    var reportData = GetReportData(id); // 获取报表数据
    // 拼接HTML模板，可结合Razor引擎渲染复杂内容
    var htmlContent = $@"
    <html>
        <head>
            <style>
                body {{ font-family: Arial, sans-serif; }}
                .sub-report {{ margin-left: 20px; border-left: 2px solid #ccc; padding-left: 10px; }}
            </style>
        </head>
        <body>
            <h1>{reportData.Title}</h1>
            <p>{reportData.Content}</p>
            <img src='{reportData.ImageUrl}' alt='{reportData.ImageAltText}' />
            <!-- 渲染子报表 -->
            {string.Join("", reportData.SubReports.Select(s => $"<div class='sub-report'><h3>{s.Title}</h3><p>{s.Content}</p></div>"))}
        </body>
    </html>";

    var converter = new SynchronizedConverter(new PdfTools());
    var doc = new HtmlToPdfDocument()
    {
        GlobalSettings = {
            ColorMode = ColorMode.Color,
            Orientation = Orientation.Portrait,
            PaperSize = PaperKind.A4,
        },
        Objects = {
            new ObjectSettings() {
                HtmlContent = htmlContent,
                WebSettings = { DefaultEncoding = "utf-8" },
            }
        }
    };

    var pdfBytes = converter.Convert(doc);
    return File(pdfBytes, "application/pdf", "sales-report.pdf");
}

内容的提问来源于stack exchange，提问作者Aless Hosry