Datazen - 将仪表板导出到图像

Question

我们需要将 Datazen 仪表板报告保存到图像文件。

报表将通过 iframe 托管在 MVC 视图中。底层报告将通过 Datazen 中的活动目录身份验证得到保护。

我想我会在以 STA 模式启动的线程中使用 WebBrowser 控件。这种方法有效，但是当我尝试查看 url 例如：

时，我会看到登录屏幕

http://MyServerAddress/viewer/dashboard?dashboardguid=17EF844E-DEBE-4FE5-B22E-CD6F74A9E6C9

这是我目前的代码。

    public ActionResult Save()
    {
        var url = "http://MyServerAddress/viewer/dashboard?dashboardguid=17EF844E-DEBE-4FE5-B22E-CD6F74A9E6C9";

        FileContentResult result = null;
        Bitmap bitmap = null;

        var thread = new Thread(
            () =>
            {
                bitmap = ExportUrlToImage(url, 1280, 1024);
            });

        thread.SetApartmentState(ApartmentState.STA); //Set the thread to STA
        thread.Start();
        thread.Join();

        if (bitmap != null)
        {
            using (var memstream = new MemoryStream())
            {
                bitmap.Save(memstream, ImageFormat.Jpeg);
                result = this.File(memstream.GetBuffer(), "image/jpeg");
            }
        }

        return result;
    }

    private Bitmap ExportUrlToImage(string url, int width, int height)
    {
        // Load the webpage into a WebBrowser control
        WebBrowser wb = new WebBrowser();
        wb.ScrollBarsEnabled = false;
        wb.ScriptErrorsSuppressed = true;

        string hdr = "Authorization: Basic " + Convert.ToBase64String(Encoding.ASCII.GetBytes("username" + ":" + "password")) + System.Environment.NewLine;


        wb.Navigate(url, null, null, hdr);
        while (wb.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }

        // Set the size of the WebBrowser control
        wb.Width = width;
        wb.Height = height;

        Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
        wb.DrawToBitmap(bitmap, new System.Drawing.Rectangle(0, 0, wb.Width, wb.Height));
        wb.Dispose();

        return bitmap;
    }

想看看我是否走上正轨并且没有错过其他方法？

Answer 1

最后我们决定使用下面的客户端库Html2Canvas

需要注意 CORS 问题，因此请确保 Datazen iframe 托管在与您的网页相同的服务器/端口等上。

呈现整个页面（即父页面和 iframe 内容）时出现问题，因此我最终只导出了 iframe 内容。

$(document).ready(function () {

        $("#btnSave").click(function () {
            // just render the body of the datazen iframe 
            var body = $("#iframe").contents().find('body');
            html2canvas(body, {
                allowTaint: true,
                onrendered: function (canvas) {
                    // canvas is the final rendered <canvas> element
                    var myImage = canvas.toDataURL("image/png");
                    window.open(myImage);
                }
            })
        });

Datazen - 将仪表板导出到图像

Datazen - exporting dashboard to image

c#

asp.net-mvc

datazen-server