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

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:

https://www.syncfusion.com/kb/5050/how-to-export-diagram-to-pdf

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

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

Reply | Reply with quote

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?

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Pdfsample1031926138

Regards,

Ramya T

Reply | Reply with quote

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

Reply | Reply with quote

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:

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

</div>

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

</div>

Neill

Reply | Reply with quote

Neill

Replied On May 27, 2019 01:01 PM UTC

The latest is the following error in a new tab:

Reply | Reply with quote

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

Reply | Reply with quote

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>

$(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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Parameter name: parameters"

Please sign in to access our forum

CONTACT US