4

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

 2 years ago
source link: https://www.cnblogs.com/wuhuacong/p/15386242.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在我的《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预览窗口了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK