【问题标题】:Google reports are not shown in pdf report in Mvc c#Google 报告未显示在 Mvc c# 的 pdf 报告中
【发布时间】:2019-07-30 02:10:19
【问题描述】:

我在报告中使用谷歌图表 (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 页面中正确显示。

【问题讨论】:

  • 图表是异步加载和绘制的,您需要等到它们的'ready' 事件触发,然后再创建pdf...
  • @WhiteHat 感谢您的回复.. 但我可以在创建的 html 文件中看到它们。这不意味着它们已加载吗?

标签: c# asp.net-mvc download google-visualization pdf-generation


【解决方案1】:

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

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

我改成这样了:

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

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

【讨论】:

  • google.charts.load 默认会等待页面加载,并且可以用来代替document.ready -- 尽管它仍然有效,但来自jsapi 库的google.load 是旧的并且不应再使用,请参阅release notes 了解更多信息...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-27
相关资源
最近更新 更多