.net core 利用Selenium和PhantomJS後臺生成EChart圖片

1.引用

NuGet安裝：

Selenium.Support

Selenium.WebDriver

Selenium.WebDriver.PhantomJS.CrossPlatform  （分佈Linux時把對應PhantomJS複製到發佈目錄）

2.後臺打開的頁面

 

@{
    Layout = "/Views/Shared/Ordinary.cshtml";
    ViewData["Title"] = "圖表模版";
}
@section css{
    <link href="@ViewBag.url/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
}
<div id="chartmain" class="col-lg-12 col-sm-12" style="height:400px;width:600px;"></div>
<script src="@ViewBag.url/lib/jquery/dist/jquery.js"></script>
<script src="@ViewBag.url/js/echarts.min.js"></script>
<script type="text/javascript">

        var time = [];
        var nameArr = [
        ];
        //指定圖標的配置和數據
        var option = {
            title: {
                text: 'chart'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {//平鋪、摺疊、生成png圖片
                show: true,
                feature: {

                    dataView: { readOnly: false },
                    magicType: { show: true, type: ['stack', 'tiled', 'line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                    show: true,//是否顯示網格線
                },
                name: "time"
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                },
                name: "value",
                splitLine: {
                    show: true,//是否顯示網格線
                }
            },
            series: [{
                name: 'value',
                type: 'line',
                data: nameArr
            }]
        };
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('chartmain'));
        //使用制定的配置項和數據顯示圖表
        myChart.setOption(option);


    function getTime(date) {
        var Hours = date.getHours();//獲取當前小時數(0-23)
        var Minutes = date.getMinutes(); //獲取當前分鐘數(0-59)
        var Seconds = date.getSeconds();//獲取當前秒數(0-59)
        var Milliseconds = date.getMilliseconds();//獲取當前毫秒數(0-999)
        return Hours + ":" + Minutes + ":" + Seconds
    }
</script>

View Code

 

3.生成圖片代碼

 

 PhantomJSDriverService pds = PhantomJSDriverService.CreateDefaultService(AppDomain.CurrentDomain.BaseDirectory.ToString());
                    var driver = new PhantomJSDriver(pds);

                    var request = injection.GetHttpContext.HttpContext.Request;
                    StringBuilder url = new StringBuilder();
                    url.Append(request.Scheme);
                    url.Append("://");
                    url.Append(request.Host);
                    url.Append("/Business/Report/TemplateEChart");
                    driver.Navigate().GoToUrl(url.ToString());//打開連接

View Code

//執行js
                    ((IJavaScriptExecutor)driver).ExecuteScript("myChart.setOption(" + JsonHelper.ObjectToJson(ff) + ");");
                    //截圖保存
                    Screenshot screenshot = ((ITakesScreenshot)driver).GetScreenshot();
                    string mapPath = @hostingEnvironment.WebRootPath;
                    string imgPatht = "/report/tempImg";
                    string dirt = mapPath + imgPatht;
                    if (!Directory.Exists(dirt))
                    {
                        DirectoryInfo dirInfo = Directory.CreateDirectory(dirt);
                    }
                    string imgSrct = imgPatht + "/" + Guid.NewGuid().ToString() + ".png";
                    string fullPatht = mapPath + imgSrct;
                    screenshot.SaveAsFile(fullPatht, ScreenshotImageFormat.Png);
                    //退出
                    driver.Quit();

View Code

 

錯誤：Permission denied

解決方法：PhantomJS文件設置最高權限

錯誤：System.TypeInitializationException: The type initializer for 'Gdip' threw an exception. ---> System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found.

解決方法：Linux安裝    yum install libgdiplus