We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Cannot save diagram to PDF and then display in a new tab

In my ASP.NET MVC application I am displaying a diagram using:

  @Html.EJ().Diagram("Pictogram", ViewData["diagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)

I would like to convert it to a PDF and display in a new tab.

I have tried the code from this:


I cannot get it working and the linked sample application crashes on line 10 of Index.cshtml

@Html.EJ().SymbolPalette("symbolpalette", ViewData["SymbolPaletteModel"as Syncfusion.JavaScript.DataVisualization.Models.SymbolPaletteProperties)

The two files are being created correctly, but instead of the PDF being displayed in a new tab, a tab opens with an error:

"The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Pictogram(Int32)' in 'Project.Controllers.MyController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

Parameter name: parameters"


Pictogram is the View that that the diagram is shown on.

Pictogram.cshtml

<li><a rel='nofollow' href="#" onclick='GeneratePdf()'>PDF 2</a></li>


<script type="text/javascript">

function GeneratePdf() {
        $('#loading-icon').show();
        var fileType = "png";
        var fileName = "diagram";
        var region = "content";
        var diagram = $("#Pictogram").data("ejDiagram");
        var image = diagram.exportDiagram({ mode : "data"});


        $.ajax({
            url: '@Url.Action("ExportToPdf", "SalesBOM")',
            type: "POST",
            dataType: 'text',
            data: { base64data: image },
            success: function (data) {

                window.open(data, "_blank");
                
             
            },
            error: function(xhr) {
                console.log("Error in error callback");
            },
            complete: function() {
                $('#loading-icon').delay(500).fadeOut(1000);
            }
        });

    }

</script>



Tx

Neill


10 Replies

RT Ramya Thirugnanam Syncfusion Team May 27, 2019 11:18 AM UTC

Hi Neill,   
We have downloaded a sample from KB and checked at our end. We are unable to replicate an issue and it is working fine. Could you please check the below sample and get back to us with modified sample if any issues faced at your end?   
Regards,  
Ramya T 



NE Neill May 27, 2019 12:18 PM UTC

Hi there,

Thank you for the second sample.

However I cannot find the DiagramController with DigramFeatures Action?

Clicking on the link displays an error:



Neill


NE Neill May 27, 2019 12:51 PM UTC

Hi there,

Am I correct in assuming that in the provided code I should be using the DefaultController/Index

If that is the case I am still getting null reference exceptions on:

<div class="symPalette_section">
            @Html.EJ().SymbolPalette("symbolpalette", ViewData["SymbolPaletteModel"] as Syncfusion.JavaScript.DataVisualization.Models.SymbolPaletteProperties)
        </div>
        <div class="middle_section"></div>
        <div class="diagram_section">
            @Html.EJ().Diagram("DiagramContent", ViewData["DiagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)
</div>

Neill


NE Neill May 27, 2019 01:01 PM UTC

The latest is the following error in a new tab:




RT Ramya Thirugnanam Syncfusion Team May 28, 2019 11:55 AM UTC

Hi Neill,    
The provided sample is working fine in our end. Could you please provide us the video to represent the reported issue? This will help us to serve you better. 
Regards, 
Ramya T 



NE Neill May 28, 2019 02:06 PM UTC

Hi Ramya,

Unfortunately I am not authorised to provide video of our application. I will attempt to explain better.

In my view I have a diagram. I click the GeneratePDF button using this code:

Pictogram.cshtml:

<div class="col-sm-1">
    <input type="button" class="btn btn-satcom-primary btn-wider" value="GeneratePDF" onclick="GeneratePdf()" />
</div>

<script type="text/javascript">
    $(function () {

    });

    function GeneratePdf() {
        console.log("GeneratePdf()");
        $('#loading-icon').show();
        var fileType = "png";
        var fileName = "diagram";
        var region = "content";
        var diagram = $("#Pictogram").data("ejDiagram");
        var image = diagram.exportDiagram({ mode : "data"});
    
        $.ajax({
            url: '@Url.Action("ExportToPdf", "SalesBOM")',
            type: "POST",
            dataType: 'text',
            data: { base64data: image },
            success: function (data) {             
                window.open("../Images/" + data);         
            },
            error: function(xhr) {
                console.log("Error in error callback");
            },
            complete: function() {
                $('#loading-icon').delay(500).fadeOut(1000);
            }
        });
    }
</script>

SalesBOMController.cs:

Syncfusion.Pdf.PdfDocument document = new Syncfusion.Pdf.PdfDocument();
        [HttpPost]
        public ActionResult ExportToPdf()
        {
            string filename = "sample.pdf";
            string filepath = null;

            if (Request.Form["base64data"] != null)
            {
                string image = Request.Form["base64data"].ToString();
                image = image.Substring(image.IndexOf(',') + 1);
                byte[] data = Convert.FromBase64String(image);
                var path = Path.Combine(Server.MapPath("~/Images"), "snapshot.png");

                // An image is generated.
                System.IO.File.WriteAllBytes(path, data);
                Thread t = new Thread(CreateDocument);
                t.SetApartmentState(ApartmentState.STA);
                t.Start();
                t.Join();
                filepath = Path.Combine(Server.MapPath("~/Images"), "sample.pdf");
                //Saves the PDF document.
                document.Save(filepath);
                document.Close(true);
            }
            return Content(filename);
        }


This page is opened in a new tab.



With regards to the sample application you provided.

I run the program.


The following NullReferenceException is thrown in Visual Studio:



I hope this is helpful.

Neill


NE Neill May 29, 2019 07:03 AM UTC

Good morning,

I created a new Syncfusion project and tested the code and it works as it should.
Then in my application I created a new action method with a new view and tested the supplied code and it again works as it should.

So it would seem that the problem lies somewhere in either my diagram or the Pictogram view. I will have to figure out what the problem is.

Thank you for the assistance.

Neill


NE Neill May 29, 2019 07:50 AM UTC

Hi again.

I have figured out what is causing the problem, I however have no idea why it is a problem.

The issue is my Pictogram(int id) Action method.

I call the Pictogram method passing in an int id. 

I then fetch data from the database and build my diagram from the data.

    [HttpGet]
    public ActionResult Pictogram(int id)
    {
        var salesBomHeader = _dbContext.SalesBOMHeaders.Find(id);

        ... Build the diagram

        return View(salesBomHeader);
    }

This causes the Resource can not be found error on the new tab.

If I change my code to:

[HttpGet]
    public ActionResult Pictogram()
    {
        var salesBomHeader = _dbContext.SalesBOMHeaders.Find(1);

        ... Build the diagram

        return View(salesBomHeader);
    }

The code works as it should and the PDF is displayed in a new tab.

Any idea as to why passing in the id is causing this problem?

Neill


NE Neill May 29, 2019 01:54 PM UTC

Finally got this working.

Its seems you cannot return the content from a HttpPost action method when you pass in a variable. Probably something to do with routing.

How I got it to work was such:


In the Export Action method that is a POST method, instead of:

return Content(filename);

I do:

return Json(filename);

Then in the View, Ajax call, instead of:

window.open(data);

I did:

 var baseLink = '@Url.Action("OpenPDF", "SalesBOM")?filename=' + data;
 window.open(baseLink, '_blank');

And added a new method:

[HttpGet]
        public ActionResult OpenPDF(string filename)
        {
            var fileString = filename.Replace('"', ' ').Trim();
            var filepath = Path.Combine(Server.MapPath("~/Images"), fileString);

            return File(filepath, "application/pdf");
        }

Hope it helps somebody in future.

Neill









RT Ramya Thirugnanam Syncfusion Team May 30, 2019 07:00 AM UTC

Hi Neill, 
 
Thanks for your update. 
 
We are glad to know that your issue is resolved. 
 
Regards, 
Ramya

Loader.
Up arrow icon