I have a php page that creates a CSV file that is then downloaded by the browser automatically. Here is a version with sample data - it works great.
<?php
$cars = array(
array("Volvo",22,18),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);
// output headers so that the file is downloaded rather than displayed
header('Content-Type: text/csv; charset=utf-8');
header('Content-Disposition: attachment; filename=csvfile.csv');
// create a file pointer connected to the output stream
$output = fopen('php://output', 'w');
// output the column headings
fputcsv($output, array('Car', 'Year', 'Miles' ));
//Loop through the array and add to the csv
foreach ($cars as $row) {
fputcsv($output, $row);
}
?>
I would like to be able to run this from another page using ajax so that a user can generate/download a csv without leaving the main page. This is the JavaScript I am using on the main page. In my real page I am using the data coming via ajax.
$('button[name="exportCSVButton"]').on('click', function() {
console.log('click');
$.ajax({
url: 'exportCSV.php',
type: 'post',
dataType: 'html',
data: {
Year: $('input[name="exportYear"]').val()
},
success: function(data) {
var result = data
console.log(result);
}
});
});
When I click the button to trigger the script, it runs, but instead of saving/download to csv it prints the entire thing to console. Is there any way to accomplish what I want? Without actually saving the file to the server and reopening.
I have done csv file download via ajax
PHP Code
<?php
function outputCsv( $assocDataArray ) {
if ( !empty( $assocDataArray ) ):
$fp = fopen( 'php://output', 'w' );
fputcsv( $fp, array_keys( reset($assocDataArray) ) );
foreach ( $assocDataArray AS $values ):
fputcsv( $fp, $values );
endforeach;
fclose( $fp );
endif;
exit();
}
function generateCsv(){
$res_prods = $wpdb->get_results( "SELECT * FROM `{$wpdb->prefix}products` ", OBJECT );
$products= [];
foreach ($res_prods as $key => $product) :
$product_id = $product->ID;
$products[$product_id]['product_id'] = $product_id;
$products[$product_id]['name'] = $product->name;
endforeach;
return outputCsv( $products);
}
jQuery AJAX
jQuery(document).on( 'click', '.btn_generate_product', function(e) {
var product_id = jQuery(this).data('product_id');
jQuery.ajax({
url : "ajaxurl",
type: 'POST',
data: { product_id },
success: function(data){
/*
* Make CSV downloadable
*/
var downloadLink = document.createElement("a");
var fileData = ['\ufeff'+data];
var blobObject = new Blob(fileData,{
type: "text/csv;charset=utf-8;"
});
var url = URL.createObjectURL(blobObject);
downloadLink.href = url;
downloadLink.download = "products.csv";
/*
* Actually download CSV
*/
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
});
});
Replace console.log(result); with file save code.
check here JavaScript: Create and save file
The best way to save file with browser dialog box, use simple code.
<a href="#" onclick="window.open('exportCSV.php?year=' + $('input[name="exportYear"]').val())" >Download File</a>
I did it time ago by creating a hidden iframe and via javascript the source of the iframe was set to a php file which sent the appropriate headers and data as your exportCSV.php does.
But, if you don't like this idea, you could use a library like jQuery File Download or FileSaver.js
Related
As the tittle says i'm coding a web app as part of a school project. My goal is for someone to upload a json file and save some data of it in a table on Mysql for further functionallity in the app.
My question is how exaclty can you pass a JSON file to PHP and then parse it from there as to store the wanted data to the DB. I tried sending it with the help of Jquery fileupload as the json files may be quite large and on the php side i used the function file_get_contents but i had no luck with it.
Here is my javascript code :
$(document).ready(function () {
$("#submitupload").click(function(){
var files = $("#files");
$("#uploadedfile").fileupload({
url: 'upload.php',
dataType: 'json',
autoUpload: false
}).on('fileuploadadd', function (e, data) {
var fileTypeAllowed = /.\.(json)$/i;
var fileName = data.originalFiles[0]['name'];
var fileSize = data.originalFiles[0]['size'];
console.log(data);
if (!fileTypeAllowed.test(fileName)){
$("#error").html('Only json files are allowed');
}else
data.submit();
}).on('fileuploaddone', function (e , data){
var msg = data.jqXHR.responseJSON.msg;
$("#error").html(msg);
}).on('fileuploadprogress', function (e,data){
var progress = parseInt(data.loaded / data.total * 100, 10 );
$("#progress").html("Completed: " + progress + "%");
})
})
})
And here is the PHP :
<?php
include_once ('connection.php');
if (isset($_FILES['uploadingfile'])){
$file = $_FILES['uploadingfile'];
$data = file_get_contents($file);
$array = json_decode($data, true );
foreach( $array as $row){
$sql = "INSERT INTO locations(timestamp) VALUES ('".$row["timestampMs"]."')";
mysqli_query($conn, $sql);
}
$msg = array("msg" => "times ok ");
exit(json_encode($msg));
}
Noticed the error in file_get_contents() that says that the $file variable is an array not a string so i tried to pass the $_FILES variable as an argument with no luck again.
Is this the correct way to way to do it and if yes what am i missing or should i use another approach?
Thanks for the long read and your time in advance ! Sorry if any of this sounds stupid but im new to PHP .
$_FILES['uploadingfile'] is an array with several pieces of information about the uploaded file. So you need to use:
$file = $_FILES['uploadingfile']['tmp_name'];
to get the filename where the data is stored.
See Handling File Uploads for full details.
I have generated an PDF using jsPdf and Html2Canvas. It works very well, and is downloadable.
I'm now aiming to get the generated .pdf saved to my server, so I can send it out via phpmailer. This is how I approached this.
function print() {
document.getElementById("out").textContent = document.getElementById("fader").value;
const filename = 'DHC_Herren_Front.pdf';
html2canvas(document.querySelector('#pdf')).then(canvas => {
let pdf = new jsPDF('l', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 298, 211, function () {
var blob = doc.output('blob');
var formData = new FormData();
formData.append('pdf', blob);
$.ajax('/st/tda/dhc/men_front/upload.php', {
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
console.log(data)
},
error: function (data) {
console.log(data)
}
});
});
});
}
and my upload.php
<?php move_uploaded_file(
$_FILES['pdf']['tmp_name'],
$_SERVER['DOCUMENT_ROOT'] . "/st/tda/dhc/men_front/test.pdf");
?>
My Question would be, why I end up without an File on the Server. I feel like there must be an simple solution to this, but I just can't pinpoint it.
Newest HTML
function ma() {
document.getElementById("out").textContent = document.getElementById("fader").value;
html2canvas(document.querySelector('#pdf')).then(canvas => {
var pdf = btoa(doc.output());
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 298, 211,);
$.ajax({
method: "POST",
url: "/st/tda/dhc/men_front/upload.php",
data: {data: pdf},
}).done(function(data){
console.log(data);
});
});
}
Newest upload.php
<?php
if(!empty($_POST['data'])){
$data = base64_decode($_POST['data']);
// print_r($data);
file_put_contents( "test.pdf", $data );
} else {
echo "No Data Sent";
}
exit();
This is how I do it. Take a look and see if you can adapt it to your code. This is the uploadFiles.php that the ajax sends the file to.
<?php
$ds = DIRECTORY_SEPARATOR; // a directory separator
$cid = $_POST["cid"]; // directory name passed from the form as a variable
$rid = $_POST["rid"]; // directory name passed from the form as a variable
$storeFolder = "../recordFiles/".$cid."/".$rid; // the place where i want to save stuff
// run only if there are files sent from ajax.
if (!empty($_FILES)) {
// check if the directory exists and if not then create it.
if (!file_exists('../recordFiles/'.$cid."/".$rid)) {
mkdir('../recordFiles/'.$cid."/".$rid, 0777, true);
}
// get the temp file name
$tempFile = $_FILES['file']['tmp_name'];
// remove all whitespace in the file name
$cleanedFileName = $_FILES['file']['name'];
$cleanedFileName = preg_replace('/\s+/', '', $cleanedFileName);
// set the target path
$targetPath = dirname( __FILE__ ).$ds.$storeFolder.$ds;
// set the target file name and path
$targetFile = $targetPath.$cleanedFileName;
// move the files
move_uploaded_file($tempFile,$targetFile);
}
?>
I have a problem generating a pdf with the TCPDF library, and tried to follow some examples that are here, but I have not managed to solve my problem, which is this: when I click on a button I am making an AJAX request Which sends a parameter and the url points to a controller in php with CODEIGNITER, the parameter is used to execute my query and generate the report based on it. I have already debugged the report with static parameters to see if it worked and without using AJAX, and everything went well. The problem is that I need to send the data this way and I do not know how to load the pdf file created in the response of my request, any ideas?
$("#BtnDownload").click(function (){
var jsonString = 2; //Example parameters;
$.ajax({
type: 'POST',
url: baseurl+"reports/selectReport",
data: {'data': jsonString},
success: function(response){
//What my driver should return
}
});
});
This is the function in my controller that I point my ajax request, I do not put all the code of the layout of my report because it is working, and the code is very long, the important thing is to know how to return my generated report And can view it from the browser.
public function selectReport(){
$this->load->library('Pdf');
$pdf = new Pdf('L', 'mm', 'A4', true, 'UTF-8', false);
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetTitle('report');
$pdf->SetSubject('Report PDF');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->setPrintHeader(false);
$pdf->setFooterData($tc = array(0, 64, 0), $lc = array(0, 64, 128));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
$pdf->SetFont('dejavusans', '', 12, '', true);
$base_url = base_url();
$data = $this->input->post("data");
// report body
$name_pdf = utf8_decode("report.pdf");
$pdf->Output($name_pdf, 'I');
}
In TCPDF ( according to TCPDF Save file to folder? ) the PDF can be saved:
$dir = 'pdfs/';
$filename = 'report' . microtime(TRUE) . '.pdf';
if( ! is_dir( FCPATH . $dir ) )
mkdir( FCPATH . $dir, 0777, TRUE );
$pdf->Output( FCPATH . $dir . $filename, 'F'); // F saves to filesystem
Since you know the PDFs are in the pdf directory:
$this->load->helper('url');
echo json_encode(array(
'path' => FCPATH . $dir . $filename,
'url' => base_url( $dir . $filename )
));
Then in your ajax success function data.url is the URL to the file:
success: function(response){
if( response.url ){
window.location = response.url;
}
}
Make sure your $.ajax has the configuration for dataType: 'json'.
$.ajax({
// ...
dataType: 'json'
// ...
});
I have multiple graphs in a single html page.I am trying to export all the graphs after the complete loading of all the graphs on that page.
I have the script to trigger the click event, but it's not working as I want it.
I want to trigger click button so that it pushes the graph image in an array as base64 encoded then send the data to a php file and save it as an image.
Two images are being created but only one image is proper and the other image is corrupt.
here is my code to graph generation:
https://jsfiddle.net/a1so23dh/2/
here is my php file code:
<?php
$data = urldecode($_POST['imageData']);
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$filename = "images/image".rand(1000,10000).".jpg";
file_put_contents($filename, $data);
?>
Any other approach may also work.
A better approach would be to just use the API methods in AmCharts' events and the AmCharts export plugin API instead of using fake clicks, similar to the first example in this tutorial. It uses the rendered event, but animationFinished works as well:
"listeners": [{
"event": "animationFinished",
"method": function(e) {
//wait for fabric
var interval = setInterval(function() {
if (window.fabric) {
clearTimeout(interval);
e.chart.export.capture({}, function() {
this.toJPG({}, function(data) {
//post base64 string in data to your endpoint directly
});
});
}
});
}
]
Updated fiddle - note that for debugging purposes I added the exported image to the bottom of the screen to validate that this works.
Your sendAllData() is not called. so I propose some changes, well it's not a full solution but help you.
$('*').click(function(e){
sendAllData();
});
function sendAllData(){
console.log(dataArray);
var arsize = dataArray.length;
console.log("here");
//execute this function and use the dataArray here
//send data to php file
if(arsize != 0){
for(i=0;i<=dataArray.length;i++){
jQuery.post( "a.php", {imageData: encodeURIComponent( dataArray[i] )})
.done(function( data ) {
if(data != 1){
console.log( "Data Loaded: " + data );
}else{
console.log("error");
}
});
}
}
}
In PHP use below code.
<?php
$data = urldecode($_POST['imageData']);
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
//$filename = "images/image".rand(1000,10000).".jpg";
//file_put_contents($filename, $data);
$im = imagecreatefromstring($data);
if ($im !== false) {
header('Content-Type: image/jpeg');
imagejpeg($im, "uploads/png3.jpeg");
imagedestroy($im);
}else{
echo '1';
}
?>
I am able to save the image of first graph i.e bar chart but in the pie chart, I am getting the error.please try this.
I have unsuccessfully been trying to send a Blob file (which is an .OBJ file type) to the server using AJAX. I want to be able to do this without using an input file field. I am making an online avatar creator, so the Blob file to be sent to the server is generated from the character that is initially imported into my Three.js scene. I have been able to send a Blob file that contains a String to the server and save this to a specified folder (which I am aiming to do with the Blob .OBJ file). I have tried converting the Blob to Base64 before sending it in a POST request, but this did not work. The size of the file that I am trying to send is 3MB.
Here is my JavaScript code for creating the Blob file and sending it to my PHP script on the server using AJAX.
//Create OBJ
var exporter = new THREE.OBJExporter();
var result = exporter.parse(child);
//Generate file to send to server
var formData = new FormData();
var characterBlob = new Blob([result], {type: "octet/stream"});
var reader = new FileReader();
reader.readAsDataURL(characterBlob);
reader.onloadend = function() {
formData.append('file', reader.result);
$.ajax({
url: "ExecuteMaya.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
processData:false, // To send DOMDocument or non processed data file it is set to false
contentType: false, // The content type used when sending data to the server
}).done(function(data) {
console.log(data);
});
}
Here is my PHP script for handling the sent file.
<?php
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
?>
Any help would be much appreciated!
UPDATE 1: The var result = exporter.parse(child); is a String and whenever I print this variable to the console it takes a few minutes to load. Would the size of this String be a possible issue with trying to send it to the server?
UPDATE 2: This gets printed to the console after the PHP script has been executed, which makes me think that either nothing is being sent over to the server or the sent data is not being handled correctly by the PHP script.
Image Uploaded Successfully...!!File Name: Type: Size: 0 kBTemp file:
UPDATE 3: Here is a link to the file that I am trying to send.
http://www.filehosting.org/file/details/578744/CleanFemaleOBJ.obj
You can view this file in TextEdit/NotePad to view the String that I want to send. It is pretty much a text file with the .obj extension to convert it to that format so it can be opened in Maya.
UPDATE 4: I have now altered my JavaScript code so that the Blob is appended to the FormData and not the result of reader.readAsDataURL(characterBlob).
//Create OBJ
var exporter = new THREE.OBJExporter();
var result = exporter.parse(child);
//Generate file to send to server
var formData = new FormData();
var characterBlob = new Blob([result], {type: "octet/stream"});
formData.append('file', result);
$.ajax({
url: "ExecuteMaya.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
processData: false, // To send DOMDocument or non processed data file it is set to false
}).done(function(data) {
console.log(data);
});
Using the following code, I was able to upload the .obj file.
I had to increase my maximum upload size for it to work.
You may also think of increasing your maximum execution time as commented below, but I didn't have to.
For simplicity, I put everything in one file called form.php.
form.php
<?php
// good idea to turn on errors during development
error_reporting(E_ALL);
ini_set('display_errors', 1);
// ini_set('max_execution_time', 300);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
echo "<b>Error:</b> " . $_FILES["file"]["error"] . "<br>";
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "uploads/" . $_FILES['file']['name']; // Target path where file is to be stored
if (move_uploaded_file($sourcePath, $targetPath)) { // Moving Uploaded file
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
} else {
echo "<span id='success'>Image was not Uploaded</span><br/>";
}
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<form action="form.php" method="post" enctype="multipart/form-data">
<label>File</label>
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
<div></div>
</body>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
// logic
$.ajax({
url: this.action,
type: this.method,
data: new FormData(this), // important
processData: false, // important
contentType: false, // important
success: function (res) {
$('div').html(res);
}
});
});
});
</script>
</html>
So, first test to see if you can upload the .obj file using the code above.
As you are testing it out, have your browser's developer tool open. Monitor your Network/XHR tab [Chrome, Firefox] to see the request that gets made when you click Upload.
If it works, try using the same logic in your original code.
var formData = new FormData();
formData.append('file', result);
$.ajax({
url: "ExecuteMaya.php",
type: "post",
data: formData, // important
processData: false, // important
contentType: false, // important!
success: function (res) {
console.log(res);
}
});
Again, monitor the request made in your Network/XHR tab and look at what is being sent.