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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144829 May 24,2019 02:14 PM UTC May 30,2019 07:00 AM UTC ASP.NET MVC - EJ 2 10
loading
Tags: Diagram
Neill
Asked On May 24, 2019 02:14 PM UTC

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


Ramya Thirugnanam [Syncfusion]
Replied On 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 


Neill
Replied On 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

Neill
Replied On 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

Neill
Replied On May 27, 2019 01:01 PM UTC

The latest is the following error in a new tab:



Ramya Thirugnanam [Syncfusion]
Replied On 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 


Neill
Replied On 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

Neill
Replied On 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

Neill
Replied On 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

Neill
Replied On 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








Ramya Thirugnanam [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon