在Vue&Element前端项目中，使用FastReport + pdf.js生成并展示自定义报表

在我的《FastReport报表随笔》介绍过各种FastReport的报表设计和使用，FastReport报表可以弹性的独立设计格式，并可以在Asp.net网站上、Winform端上使用，由于其主要是使用.net后端生成的报表方式，如果不考虑其在线设计处理，那么可以在在Vue&Element前端项目中使用，通过后端生成报表PDF文件，然后通过前端使用pdf.js来呈现报表最终效果即可。

1、使用FastReport生成自定义报表

我们通过定义自己FastReport报表格式，然后在后端生成PDF文件存储在指定目录中，并返回路径给前端，前端就可以通过pdf.js进行预览了。

关于FastReport报表的设计，这里不再赘述，主要就是通过几个简单的案例展示生成的报表逻辑。

 

 

 

 

 我们来看看其中的报表生成代码，主要分为几个步骤：初始化报表、准备数据、运行并导出报表。

 

其中从初始化报表如下代码所示。

    #region 初始化报表
    //报表文件路径
    string reportPath = "/Report/Pres.frx";
    //转换为物理路径
    reportPath = System.Web.Hosting.HostingEnvironment.MapPath(reportPath);

    //导出PDF/jpg的文件路径
    string exportPdfPath = $"/GenerateFiles/Pres/Report_{id}" + (pdf ? ".pdf":".jpg");

    //转换为物理路径
    string realPath = System.Web.Hosting.HostingEnvironment.MapPath(exportPdfPath);
    //确保目录生成
    string parentPath = Directory.GetParent(realPath).FullName;
    DirectoryUtil.AssertDirExist(parentPath);

    //生成PDF报表文档到具体文件
    Report report = new Report();
    report.Load(reportPath);

    #endregion

而初始化报表后，就需要准备相应的参数和数据等信息了，下面是测试数据代替

    dict.Add("Name", "张三");
    dict.Add("Gender", "男");
    dict.Add("Age", 32);
    dict.Add("Telephone", "18620292076");
    dict.Add("CreateTime", "2019-10-13 22:30:15");
    dict.Add("CheckDoctor", "张医生");
    dict.Add("CheckPharmacist", "李药师");
    dict.Add("SendUser", "王小姐");
    dict.Add("QrCode", "http:www.iqidi.com");
    dict.Add("BarCode", "1234567890");

    for (int i = 0; i < 5; i++)
    {
        var dr = dt.NewRow();
        dr["ProductName"] = "阿莫西林" + i;
        dr["Quantity"] = i;
        dr["Unit"] = "盒";
        dr["Specification"] = "一盒24粒" + i;
        dr["HowTo"] = "口服";
        dr["Frequency"] = "一次三次，一次一片";
        dt.Rows.Add(dr);
    } 

准备好数据后，更新相关参数和数据源即可。

    //刷新数据源
    report.RegisterData(dt, "Detail");
    foreach (string key in dict.Keys)
    {
        report.SetParameterValue(key, dict[key]);
    }

然后我们根据是否PDF格式（否则为图片格式）的标志生成文件，如下所示。

    #region 运行并导出报表

    report.Prepare();                   
    if(pdf)
    { 
        //导出PDF报表
        var export = new PDFExport();
        report.Export(export, realPath);
    }
    else
    {
        //导出JPG报表
        var export = new ImageExport();
        //export.JpegQuality = 392;
        //export.ResolutionY = 226;
        report.Export(export, realPath);
    }
    report.Dispose();

    #endregion

最后返回路径给前端即可。

 

 

2、前端调用pdf.js插件生成并展示自定义报表

后端生成PDF文件后，返回路径给前端，由于是PDF文件，我们可以利用 pdf.js生成并展示自定义报表文件。

首先在前端的API调用类中构建对应的调用函数，如下所示。

 

 然后在页面中增加对应的处理方式即可。

 

 页面中通过按钮的触发调用这个函数，就可以呈现对应的PDF预览窗口了。