时间戳

首页 > 解决方案 > Google 报告未显示在 Mvc c# 的 pdf 报告中

c# - Google 报告未显示在 Mvc c# 的 pdf 报告中

问题描述

我在报告中使用谷歌图表（https://developers.google.com/chart/），我正在使用以下代码生成这些 html 文件的 Pdf 文件：

      public FileResult DownloadReport(string viewName, string fileName, MpReportType type, int id = 0, DateRangeType? dateRangeType = null)
        {
            const string CONTAINER = "#reportContainer";
            var model = GetModel(type, id, true, dateRangeType);
            return DownloadReportInternal(viewName, fileName, model, CONTAINER);
        }

      private FileResult DownloadReportInternal(string viewName, string fileName, ReportGeneratorModel model, string container = "#reportContainer")
        {
            var htmlToConvert = GetHtmlFromView(viewName, model);

            var hiddenElements = new string[] { ".reportHiddenElement" };


            var pdfStream = ConvertHtmlToPdf(htmlToConvert, container, hiddenElements);

            using (var ms = new MemoryStream())
            {
                byte[] buffer = new byte[16 * 1024];

                int read;
                while ((read = pdfStream.Read(buffer, 0, buffer.Length)) > 0)
                {
                    ms.Write(buffer, 0, read);
                }
                var pdfBytes = ms.ToArray();

                FileResult fileResult = new FileContentResult(pdfBytes, "application/pdf");
                fileResult.FileDownloadName = fileName;
                return fileResult;
            }
        }


      protected string RenderViewAsString(string viewName, object model)
        {
            StringWriter stringWriter = new StringWriter();
            ViewEngineResult viewResult = ViewEngines.Engines.FindView(ControllerContext, viewName, null);
            ViewContext viewContext = new ViewContext(
                ControllerContext,
                viewResult.View,
                new ViewDataDictionary(model),
                new TempDataDictionary(),
                stringWriter);
            viewResult.View.Render(viewContext, stringWriter);
            return stringWriter.ToString();
        }

我正在从 Views 中调用 DownloadReport。

这是包含图表部分的视图的一部分

 <div class="ring-chart__chart" id="cumulativeExpenseSummaryChart"></div>

这是在js中调用图表的功能：

 var drawCharts = function() {
            @if (Model.ComprehensiveCashflowTrack.ExpensePieChart != null)
            {
                var chart = Model.ComprehensiveCashflowTrack.ExpensePieChart;
                <text>
                    var data = google.visualization.arrayToDataTable([
                        ['@chart.Name', '@chart.Description']
                        @foreach (var item in chart.Items)
                        {
                            <text>, ['@item.Name', @item.Value]</text>
                        }
                    ]);
                    //DrawCashflowRingChart('Monthly Expense Summary', 'cumulativeExpenseSummaryChart', data);
            drawNetCashflowPieChart('Monthly Expense Summary', 'cumulativeExpenseSummaryChart', data);
                </text>
            }
        }

问题： 图表未加载到 pdf 报告中。它们在 HTML 页面中正确显示。

标签： c#asp.net-mvcdownloadgoogle-visualizationpdf-generation

解决方案

在我更改了谷歌可视化加载方式后，它适用于某些 pdf。而不是在document.ready()中加载图表，如下所示：

  google.charts.load('current',
      {
         callback: drawCharts,
         packages: ['corechart']
      });

我把它改成这样：

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);

它不应该被视为答案，因为它在某些 pdf 中并不成功。

推荐阅读