在Razor View Engine .net核心中渲染Google图表

编程问答 2022-08-12

问题描述

直到最近，我一直在使用Google图表生成一些pdf报告，但是突然间Google图表不会出现。报告的其余部分工作正常。我使用的是razor视图引擎来运行带有javascript的模板文件来加载Google图表。

模板文件具有initCharts()触发的<body onload=initCharts()>函数。此功能可按以下方式加载Google图表：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript">

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

    other functions to load varIoUs charts

此模板文件随后由razor视图引擎加载，如下所示：

public async Task<string> RenderToStringAsync(string viewName,object model,string logoUrl)
        {
            Dictionary<object,object> dictionary =  new Dictionary<object,object>();
            dictionary.Add("logoUrl",logoUrl);

            var httpContext = new DefaultHttpContext { RequestServices = _serviceProvider,Items = dictionary };
            var actionContext = new ActionContext(httpContext,new RouteData(),new ActionDescriptor());

            using (var sw = new StringWriter())
            {
                var viewResult = _razorViewEngine.FindView(actionContext,viewName,false);

                if (viewResult.View == null)
                {
                    throw new ArgumentNullException($"{viewName} does not match any available view");
                }

                var viewDictionary = new ViewDataDictionary(new EmptyModelMetadataProvider(),new ModelStateDictionary())
                {
                    Model = model
                };

                var viewContext = new ViewContext(
                    actionContext,viewResult.View,viewDictionary,new TempDataDictionary(actionContext.HttpContext,_tempDataProvider),sw,new HtmlHelperOptions()
                );

                await viewResult.View.RenderAsync(viewContext);
                return sw.ToString();
            }
        }

razorview引擎的输出（来自RenderToStringAsync函数）将提供给DinkToPdf库，以转换为pdf。

我的问题是，当google.charts.load行执行时，它失败或在加载javascript之前razorview返回html。 javascript不在razorview中执行，因此图表无法呈现。但是，如果我将输出复制到HTML文件并用浏览器打开，则图表将按预期工作。 google.charts.load行之后，似乎在razorview引擎中未执行JavaScript。

我是否可以在razorview引擎中看到执行javascript的结果？是否可以查看错误？我可以加载Google之类的第三方脚本并在razorview引擎中执行它吗？

我花了很多时间都徒劳无功。您的帮助将不胜感激！

解决方法

通过用PhantomJS替换DinkToPdf来创建PDF，从而解决了该问题。 DinkToPdf无法加载Google图表。这可能是由于Google将对jsapi的请求重定向到其较新的loader.js所致，DinkToPdf由于某种原因而无法处理。

DinkToPdf使用的在命令行运行wkhtmltopdf时，访问https时显示一些错误，如下所示：

QSslSocket: cannot resolve CRYPTO_num_locks                  ] 10%
QSslSocket: cannot resolve CRYPTO_set_id_callback
QSslSocket: cannot resolve CRYPTO_set_locking_callback
QSslSocket: cannot resolve sk_free
QSslSocket: cannot resolve sk_num
QSslSocket: cannot resolve sk_pop_free
QSslSocket: cannot resolve sk_value
QSslSocket: cannot resolve SSL_library_init
QSslSocket: cannot resolve SSL_load_error_strings
QSslSocket: cannot resolve SSLv3_client_method
QSslSocket: cannot resolve SSLv23_client_method
QSslSocket: cannot resolve SSLv3_server_method
QSslSocket: cannot resolve SSLv23_server_method
QSslSocket: cannot resolve X509_STORE_CTX_get_chain
QSslSocket: cannot resolve OPENSSL_add_all_algorithms_noconf
QSslSocket: cannot resolve OPENSSL_add_all_algorithms_conf
QSslSocket: cannot resolve SSLeay
QSslSocket: cannot call unresolved function CRYPTO_num_locks
QSslSocket: cannot call unresolved function CRYPTO_set_id_callback
QSslSocket: cannot call unresolved function CRYPTO_set_locking_callback
QSslSocket: cannot call unresolved function SSL_library_init
QSslSocket: cannot call unresolved function SSLv23_client_method
QSslSocket: cannot call unresolved function sk_num
QSslSocket: cannot call unresolved function SSLv23_client_method3%
QSslSocket: cannot call unresolved function SSL_library_init
Warning: Failed to load https://www.gstatic.com/charts/loader.js (ignore)
QSslSocket: cannot call unresolved function SSLv23_client_method
QSslSocket: cannot call unresolved function SSL_library_init

由于无法解决此问题，我们决定使用PhantomJS，并且可以很好地创建PDF。

chartsdinktopdfgoogle-visualizationrazorrazorrazorrazor-2