Download PDF Using AJAX and TCPDF - javascript

I am trying to make a post via AJAX to a PHP script that will then create a PDF.
function getPDF() {
var hashed_center_ids = JSON.parse($('#hashed_center_ids').val());
var print_data = $('.print-options:checked').map(function() {
return this.value;
}).get();
$.ajax({
type: "POST",
url: "<?=site_url('front_office/get_pdf/')?>",
data: {hashed_center_ids : hashed_center_ids, print_data : print_data},
dataType: "text",
success: function(response) {
console.log(response)
var blob=new Blob([response]);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="test"+new Date()+".pdf";
link.click();
}
});
}
Once my PDF has been created I return it like so:
return $pdf;
However this just returns,
Message: Object of class TCPDF could not be converted to string
in the chrome console.
Can anybody help me?

Related

Unable to send multiple data parameters with jQuery AJAX

I am trying to send values to other page Using Ajax
But i am unable to receive those values , i don't know where i am wrong
here is my code
<script type="text/javascript">
function get_more_info() { // Call to ajax function
var fval = document.getElementById('get_usecompny').value;
var dataString1 = "fval="+fval;
alert(fval);
var sval = document.getElementById('country').value;
var dataString2 = "sval="+sval;
alert(sval);
$.ajax({
type: "POST",
url: "getmoreinfo.php", // Name of the php files
data: "{'data1':'" + dataString1+ "', 'data2':'" + dataString2+ "'}",
success: function(html)
{
$("#get_more_info_dt").html(html);
}
});
}
</script>
in alert i am getting those value but in page 'getmoreinfo.php' i am not receiving any values
here is my 'getmoreinfo.php' page code
if ($_POST) {
$country = $_POST['fval'];
$country1 = $_POST['sval'];
echo $country1;
echo "<br>";
echo $country;
}
Please let me know where i am wrong .! sorry for bad English
You are passing the parameters with different names than you are attempting to read them with.
Your data: parameter could be done much more simply as below
<script type="text/javascript">
function get_more_info() { // Call to ajax function
var fval = document.getElementById('get_usecompny').value;
var sval = document.getElementById('country').value;
$.ajax({
type: "POST",
url: "getmoreinfo.php", // Name of the php files
data: {fval: fval, sval: sval},
success: function(html)
{
$("#get_more_info_dt").html(html);
}
});
}
</script>
Or cut out the intermediary variables as well and use the jquery method of getting data from an element with an id like this.
<script type="text/javascript">
function get_more_info() { // Call to ajax function
$.ajax({
type: "POST",
url: "getmoreinfo.php", // Name of the php files
data: { fval: $("#get_usecompny").val(),
sval: $("#country").val()
},
success: function(html)
{
$("#get_more_info_dt").html(html);
}
});
}
</script>
No need to create 'dataString' variables. You can present data as an object:
$.ajax({
...
data: {
'fval': fval,
'sval': sval
},
...
});
In your PHP, you can then access the data like this:
$country = $_POST['fval'];
$country1 = $_POST['sval'];
The property "data" from JQuery ajax object need to be a simple object data. JQuery will automatically parse object as parameters on request:
$.ajax({
type: "POST",
url: "getmoreinfo.php",
data: {
fval: document.getElementById('get_usecompny').value,
sval: document.getElementById('country').value
},
success: function(html) {
$("#get_more_info_dt").html(html);
}
});

JS The downloaded archive throws "the archive is either unknown format or damaged"

I keep getting the problem with downloaded zip file. All the time when I click on the archive it throws "Archive is either unknown format or damaged". I think the problem is with the coding (format of the content of the archive). Please help!
$.ajax({
url: '/Unloading/' + $("#radioVal:checked").val(),
type: "POST",
data: { 'dateTimeTo': $("#dateTimeTo").val(), 'dateTimeFrom': $("#dateTimeFrom").val() },
beforeSend: function() {$("#divLoading").show();},
success: function (result) {
$("#divLoading").hide();
if (result.length === 0) {
var message ="Error";
$("#dialog-message").text(message);
$("#dialog-message").dialog({
modal: true,
buttons: {
close: function() {
$(this).dialog("close");
}
}
});
} else {
var xmlstr, filename, bb;
filename = "UnloadedLeases.zip";
bb = new Blob([result], { type: "application/zip" }); // I think somewhere here is a problem with the coding
var pom = document.createElement('a');
pom.setAttribute("target", "_blank");
pom.setAttribute('href', window.URL.createObjectURL(bb));
pom.setAttribute("download", filename);
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom); //removing the element a from the page
}
},
As far as I know, $.ajax doesn't let you download binary content out of the box (it will try to decode your binary from UTF-8 and corrupt it). Either use a jQuery plugin (like jquery.binarytransport.js) or use a xhr directly (with responseType).
$.ajax({
url: '/Unloading/' + $("#radioVal:checked").val(),
type: "POST",
dataType: 'binary', // using jquery.binarytransport.js
// ...
success: function (result) {
// Default response type is blob
if (result.size === 0) { // instead of length for blobs
// ...
} else {
var bb = result; // already a blob
// ...
}
}
})

Use a Blob URI as destiny URI in jQuery AJAX

Well... I am trying to make a AJAX Request with jQuery AJAX where the destiny URI is a Blob URI, the code is this:
<input type="file">
<script>
$('input').change(function (event) {
var pathsito = window.URL.createObjectURL(event.target.files[0]);
window.open(pathsito);
$.ajax({
type: "POST",
url: pathsito,
data:{
myData:"Cool!"
}
}).done(function(data) {
alert("Returned Text: " + data);
});
})
</script>
The result of this code: nothing, literally, it do not make nothing , a solution, please

uploading spreadsheet to parse.com from javascript

I am able to upload a spreadsheet (.csv or XLS files), but when checking on the file from Parse.com, it is all empty. I am uploading the file from client side code (not using REST). Do you think that is the problem? This works just fine for a simple image/file upload using a similar code, but fails for csv or xls type file.
Here's the code:
$scope.uploadSpFile = function(fileUpload){
var name = fileUpload.name;
var parseFile = new Parse.File(name, fileUpload.spFile);
var serverUrl = 'https://api.parse.com/1/files/' + fileUpload.name;
var mySpreadsheet = new Parse.Object(fileUpload.className);
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Parse-Application-Id", parse_app_id);
request.setRequestHeader("X-Parse-REST-API-Key", parse_rest_id);
request.setRequestHeader("Content-Type", fileUpload.spFile.type);
},
url: serverUrl,
data: fileUpload.mySpreadsheet,
processData: false,
contentType: false,
success: function(data) {
mySpreadsheet.set({filetitle: data.name});
mySpreadsheet.set({fileurl: data.url});
mySpreadsheet.set({name: name});
mySpreadsheet.set({fileCategory: ''});
mySpreadsheet.set({file: {"name": data.name,"url": data.url,"__type": "File"}});
mySpreadsheet.save();
console.log('file saved!');
},
error: function(data) {
var obj = jQuery.parseJSON(data);
console.log('error: ' + obj.error);
outputMsg = obj.error;
}
});
}
});
when i use a similar code to upload an image, I can access the file on my parse page, but xls or csv files turn out to be empty (actually, in XLS case, an error pops out as the format is corrupted).
Anyone has any idea how to fix this issue?
thanks for the help.

Saving HTML 5 Canvas as Image on the server using ASP.NET

I need some help here..
Im trying to save a canvas image after drawing..
following this example (http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx)
$("#btnSave").click(function () {
var image = document.getElementById("canvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: "../../Home/UploadImage?imageData=" + image,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
});
the controller:
public void UploadImage(string imageData)
{
string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
But when im trying to convert form base64 the string that is passed like parameter in method, throw an error
Invalid length for a character array Base-64.
You can't post data with querystring parameters
Try this;
$("#btnSave").click(function () {
var image = document.getElementById("canvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: "../../Home/UploadImage",
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
});
In that example, the author has posted the image data using a hidden field, notice below line of code in his article
<input type="hidden" name="imageData" id="imageData" />
http://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc
And on click of the button, he is submitting the form after getting canvas data to the hidden field so follow the same approach. As written by Mehmet, querystring has limitations and its prone to be modified as it goes via url.
Instead of this
image = image.replace('data:image/png;base64,', '');
use this:
image = image.substr(23, image.length);
remove the leading characters up to the first comma (use any dev tool to see what you posted).

Categories