Get pdf of current page MVC 5 - javascript

I am trying to get a pdf of a div in my view.
I am doing the following:
I get the element, uri encode its html, then pass it to a method via ajax:
AJAX:
function getPDF(html) {
$.ajax({
type: "POST",
url: "#Url.Action("printPage")",
data: { html: encodeURIComponent(html) }
}).done(function (result) {
window.open("data:application/pdf; " + result);
$("#printArea").html(result);
}).fail(function (data) {
alert("Failed");
});
}
Method:
[HttpPost]
public void printPage(string html)
{
String decoded = System.Uri.UnescapeDataString(html);
var cd = new System.Net.Mime.ContentDisposition
{
FileName = "something.pdf",
Inline = false
};
Response.AppendHeader("Content-Disposition", cd.ToString());
var mem = Bcs.Common.Utilities.HTMLtoPDF.getPDF(decoded);
//var base64EncodedPDF = System.Convert.ToBase64String(pdfByteArray);
Response.BinaryWrite(mem.ToArray());
//return File(mem, System.Net.Mime.MediaTypeNames.Application.Octet);
}
In the end I get a popup to open a pdf but it won't open, according to adobe acrobat it is corrupt.
I tried sending the html as a perameter to the method, but the perameter is too long
HTTP Error 404.15 - Not Found The request filtering module is configured to deny a request where the query string is too long.
What would be a good way of doing this.

public JsonResult printPage(String html)
{
String decoded = System.Uri.UnescapeDataString(html);
var cd = new System.Net.Mime.ContentDisposition
{
FileName = "something.pdf",
Inline = false
};
var mem = Bcs.Common.Utilities.HTMLtoPDF.getPDF(decoded);
mem.Flush();
mem.Position = 0;
String b64Converted = Convert.ToBase64String(mem.ToArray());
return Json(b64Converted, JsonRequestBehavior.AllowGet );
System.Net.Mime.MediaTypeNames.Application.Octet);
}
Then in the view:
$.ajax({
type: "POST",
url: "#Url.Action("printPage")",
data: { html: encodeURIComponent(html) },
}).done(function (result) {
$("#printArea").append('PDF');
}).fail(function (data) {
alert("Failed");
});
Apparently its very easy
Just base64 the pdf and send it over at the json response.

Related

Download XML received from controller

I need to download an XML received from a controller, but I need the prompt to write a the name and the location where the file will be saved.
First question: is optimal to send the xml like I did in this code or I should send it like a file in some way.
Second question: receiving the xml or the xml file, how can open the prompt and finally save the xml like a file?
[HttpPost]
public ActionResult ExportFiles(string clientName, string currenthcsystem)
{
try
{
var systemActionsConfigurationData = service.GetHcSystemActionsConfigurationData(clientName,currenthcsystem);
XmlSerializer xsSubmit = new XmlSerializer(typeof(HcSystemActionsConfigurationData));
var xml = "";
using (var sww = new StringWriter())
{
using (XmlWriter writer = XmlWriter.Create(sww))
{
xsSubmit.Serialize(writer, systemActionsConfigurationData);
xml = sww.ToString();
}
}
return Content(xml, "text/xml");
}
catch (Exception)
{
throw;
}
}
$('#exportButton').on("click", function () {
var clientName = $(actionsButtons).data('clientname');
var currentHCSystem = $(actionsButtons).data('hcsystemname');
// Create FormData object
var parameters = new FormData();
parameters.append("clientName", clientName);
parameters.append("currentHCSystem", currentHCSystem);
$.ajax({
url: $(actionsButtons).data('export'),
type: 'POST',
data: parameters,
cache: false,
processData: false,
contentType: false,
success: function (response) {
//logic to open the prompt and finally download the xml
},
error: function (err) {
}
});
});

Access file using MVC 6 .NET Core with ajax

I am calling this function to send a file via post:
function AddFileHandler() {
return $.ajax({
processData: false,
contentType: false,
type: "POST",
url: '#Url.Action("AddFile", "SomeController")',
data: getFile()
})
}
In my controller, there is this method which produces an error on the first line:
[HttpPost]
public string AddFile()
{
var attachedFile = Request.Form.Files["CsvDoc"]; // there is an error of wrong contentType
return "";
}
My getFile method optains data like this:
function getFile() {
var input = document.getElementById("csvFile");
if (!input || !input.files || !input.files[0]) {
return ";";
}
console.log(input.files[0]); //inputs my file correctly
var data = new FormData();
data.append("CsvDoc", input.files[0]);
}
What exactly am I doing wrong? Does it matter what is in the html?
You're forgetting to return anything from getFile()
simply add
return data;

how to download file into aclient from server without Returning filepathresult

i saw this code for downloading a file into client from server...
public ActionResult Download()
{
string file = #"c:\someFolder\foo.xlsx";
string contentType = "application/pdf";
return File(file, controntType, Path.GetFileName(file));
}
But the problem is that i have to do two different things in this Download method.Atfirst ,i want to download the file and then i need to get path of downloaded file and pass in to a documentviewr to display it.so i wrote this code in view razor.
function navigate(target) {
$.ajax({
url: '#Url.Action("Download", "Patient")',
type: 'GET',
dataType: 'json',
cache: false,
data: { 'filepath' : target },
success: function (results) {
event.preventDefault();
documentViewr.loadDocument(results);
},
error: function () {
alert('Error occured');
}
});
}
and in my controller i wrote this:
[HttpGet]
public JsonResult Download(string filepath)
{
var content_type = "";
//path = Path.Combine("D:\file1", filename);
content_type = "application/pdf";
FilePathResult file = File(filepath, content_type,
Path.GetFileName(filepath));
String sDocID, sDocPath;
ViewerController vc = new ViewerController();
sDocPath = Server.MapPath(".") + "\\App_Data\\sample.docx";
sDocID = vc.LoadDocument(sDocPath);
return Json(sDocID, JsonRequestBehavior.AllowGet);
}
so my question is that how i can merge this two actions together?because if i do not return FilePathResult i can not download the file..my another question is that how i can define the path in which file will be downloded?can i tell it to download files into for example Server.MapPath(".") + "\App_Data\...??
i will be grateful if u can help me....

javascript ajax call not not hitting controller

I am trying to build up a list of mock files for Dropzone.js to consume. I have an MVC controller method defined as follows:
[HttpPost]
public async Task<JsonResult> GetImageInfo(int imageId)
{
//int imgId;
//int.TryParse(imageId, out imgId);
var image = await RepublikDb.PropertyImage.FindAsync(imageId);
var path = Server.MapPath(image.ImageURI);
var size = new FileInfo(path).Length;
var fileName = new FileInfo(path).Name;
var thumbnailURI = image.ThumbnailImage.ImageURI.TrimStart('~');
return Json(new { fileName = fileName, size = size, thumbnailURI = thumbnailURI });
}
I have tested this endpoint with Postman, and everything works as expected, however each time I try and get the data in JS, the server returns a 500 error code, with complaints of the following: Exception Details: System.ArgumentException: The parameters dictionary contains a null entry for parameter 'imageId' of non-nullable type 'System.Int32'
Here is the JS AJAX code:
//Entry point to JS from razor. A comma separated string is passed here. Eg. imageIds = "10,12,14,16"
EditFormInit("#Model.PropertyImageIds")
var EditFormInit = function (imageIds) {
var imageIdsArr = imageIds.split(",");
var imageFiles = [];
imageIdsArr.forEach(function (ImageId) {
var requestData = { imageId: parseInt(ImageId) };
//var reqUrl = "?imageId=";
//reqUrl = reqUrl.concat(requestData.imageId.toString());
$.ajax({
type: "POST",
url: "/Admin/PropertyImage/GetImageInfo",
data: requestData,
contentType: "text/json; charset=utf-8",
dataType: "json",
success: function (data, status, jqXHR) {
var image = { fileName: data.fileName, size: data.size, thumbnail: data.thumbnailURI }
imageFiles.push(image);
}
});
});
Try:
contentType: "application/json"
This should work
so i finally realised why the controller was not getting hit, and resolved that issue. The $.ajax was passing the controller a JSON request, which was obviously failing.Once I removed the offending lines, the controller breakpoint finally got hit.
$.ajax({
type: "POST",
url: "/Admin/PropertyImage/GetImageInfo",
data: requestData,
success: function (data, status, jqXHR) {
var image = { fileName: data.fileName, size: data.size, thumbnail: data.thumbnailURI }
imageFiles.push(image);
}}
);
Even though the response from the controller is now coming back, the imageFiles array is still null. What am I doing wrong here?

How to pass uploaded image path to controller via ajax [duplicate]

This question already has answers here:
How to append whole set of model to formdata and obtain it in MVC
(4 answers)
Closed 6 years ago.
When passing uploaded file through ajax to asp.net MVC controller, file property is showing null value in controller.
image file object taken by document.getElementById('fileUpload').files[0] action and convert to JSON.stringify(fileName) but when pass that object to asp.net mvc controller
it is showing null value in mvc controller.
please if any one know how to pass that file to ajax to mvc controller, please post your answer
Admin controller
[HttpPost]
public string AddRetailer(HttpPostedFileBase file, string storeName, string storeUrl, string ecommercePlatform)
{
try {
Bswayed.Admin.Retailer retailer = new Bswayed.Admin.Retailer();
return JsonConvert.SerializeObject(data);
} catch (Exception ex) {
throw ex;
}
}
Asp.net upload form
<input type="file" id="fileUpload" name="fileUpload" onchange="this.parentNode.nextSibling.value = this.value"/>Browse
<input class="input-lg"
#Html.TextBoxFor(Model => Model.StoreLogo, new { placeholder=#ViewBag.StoreLogo})
Java script(Ajax)
function AddRetailer()
{
try {
var storeName = $("#StoreName").val();
var storeUrl = $("#StoreURL").val();
var retailerLogoPath = $("#StoreLogo").val();
var ecommercePlatform = $("#EcommercePlatform").val();
var fileName = document.getElementById('fileUpload').files[0]
$.ajax({
url: $("#addRetailer").val(),
cache: false,
type: "POST",
data: {
file:JSON.stringify(fileName),
storeName: storeName,
storeUrl: storeUrl,
ecommercePlatform: ecommercePlatform
},
dataType: "json",
success: function (data) {
},
error: function (resp) {
alert(resp);
}
});
}
catch (e) {
}
}
You don't need to stringfy uploaded image path. Below code is working in my application. I just used FormData() to get all form. After that added all items in form that i want to send to controller. In this case, you don't need to pass parameter in controller. You can get by Request.Files for image & Request.Form for extra data. I hope, It may helps you. If there is any wrong, then share with me, i will sort it out.
Java Script -
function AddRetailer()
{
try {
var storeName = $("#StoreName").val();
var storeUrl = $("#StoreURL").val();
var retailerLogoPath = $("#StoreLogo").val();
var ecommercePlatform = $("#EcommercePlatform").val();
var fileName = document.getElementById('fileUpload')..get(0).files;
var data = new FormData();
if (fileName.length > 0) {
data.append("userUploadedImage", fileName[0]);
data.append("storeName", storeName);
data.append("storeUrl", storeUrl);
data.append("ecommercePlatform", ecommercePlatform);
}
$.ajax({
url: $("#addRetailer").val(),
processData: false,
contentType: false,
type: "POST",
data: data,
success: function (data) {
},
error: function (resp) {
alert(resp);
}
});
}
catch (e) {
}}
Controller -
[HttpPost]
public string AddRetailer()
{
HttpPostedFileBase image = Request.Files["userUploadedImage"];
string storeName = Request.Form["storeName"];
string storeUrl = Request.Form["storeUrl"];
string ecommercePlatform = Request.Form["ecommercePlatform"];
}

Categories