I have the following PHP code which outputs a document from a web service:
$db->where('documentReference', $post->documentID);
$results = $db->getOne('documents');
$filelocation = 'doc/';
$file = $results['filename'];
header('Content-type: application/vnd.openxmlformats-officedocument.wordprocessingml.document');
header('Content-Length: ' . filesize($filelocation.$file));
header('Content-disposition: attachment; filename="'.$file.'"');
readfile($filelocation.$file);
And on the front end..
APIService.registerUser($scope.formData).then(function(data){
var blob = new Blob([data.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
var config = {
data: blob,
filename: 'test.docx'
};
FileSaver.saveAs(config);
});
}
When I inspect the data returned from the API the document get returned fine, but when being saved it's always empty?
When calling the API endpoint you need to set the responseType to array buffer like so:
var promise = $http.post('http://someurl', formData, {responseType: 'arraybuffer'});
return promise;
The file then gets saved properly.
Related
I have a page where a user can download an image in the format he ask, the request is sent to a PHP script that produce the image and ... I want to serve to the user.
This is the JQUERY code sourced here on StackOverflow
$('[name ="download_img_ajax"]').click(function(e){
e.preventDefault()
var element = this
var formdata = new FormData(element.closest(".form_downIMG"))
formdata.append('download_img_ajax','true')
$(this).next("span.down_response").html('Preparazione file in corso...'),
$('.emailadr').hide(),
$.ajax({
type: 'POST',
url: '$target_post',
data: formdata,
cache: false,
contentType: false,
processData: false,
success: function(tornato) {
const blob = new Blob([tornato], {type: 'image/jpeg'});
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = "file.jpg";
document.body.appendChild(a);
a.click();
},
})
})
The PHP script generate the file as a tmp file ($img), but I don't understand how return it as a correct AJAX response.
echo fread($img,filesize($img_path));
isn't working (the file isn't recognized as JPG file) even if the size is correct.
In a normal form I return the file this way:
header('Content-Transfer-Encoding: binary'); // For Gecko browsers mainly
header('Accept-Ranges: bytes'); // For download resume
header('Content-Length: ' . filesize($img_path)); // File size
header('Content-Encoding: none');
header('Content-Type: image/jpeg'); // Change this mime type if the file is not PDF
header('Content-Disposition: attachment; filename=' . $imgID); // Make the browser display the Save As dialog
readfile($img_path);
fclose($img);
PS: In JQ I use next, closest, etc. because I have many forms in the same dynamically generated by PHP.
I will use this kind of download only for file of ~700KB, leaving the bigger file on the old method of a submit form with target="_blank" and readfile in the PHP. Is safe?
If I want manage also error (example the PHP script can't serve the file) how I can handle it?
Thanks.
Solved with FileSaver.js ( https://github.com/eligrey/FileSaver.js )
var xhr = new XMLHttpRequest()
xhr.open('POST', '$target_post')
xhr.responseType = 'blob'
xhr.onload = function() {
saveAs(xhr.response, 'immagine.jpg');
}
xhr.send(formdata)
the PHP
echo fread($img,filesize($img_path));
I try to open a pdf in the iframe but I have this message.
I tried lot of things but no one works.
Thank you.
Resource interpreted as Document but transferred with MIME type application/pdf: "data:application/pdf;base64,SFRUUC8xLjAgMjAwIE9LDQpDYWNoZS1Db250cm9sOiBwdWJsaWMNCkNvbnRlbnQtVHlwZTogIGFwcGxpY2F0aW9uL3BkZg0KRGF0ZTogICAgICAgICAgRnJpLCAyMyBGZWIgMjAxOCAxMDowNDowNiBHTVQNCkxhc3QtTW9kaWZpZWQ6IEZyaSwgMjMgRmViIDIwMTggMDk6NDI6NDYgR01UDQoNCg==".
HTML
<iframe class="opendoc" style="display:none;"></iframe>
Controller
$response = new BinaryFileResponse("path to pdf");
$response->trustXSendfileTypeHeader();
$response->headers->set('Content-Type', 'application/pdf');
$str = base64_encode($response);
return new JsonResponse($str);
Ajax
$.ajax({
url: urlD,
type:'POST',
data: $(form).serialize(),
success: function (response) {
$('.opendoc').css('display','block');
$('.opendoc').attr('src', 'data:application/pdf;base64,'+ response);
}
});
I will reccomend you to use knp-snappy bundle, there are a lot of useful options and one of them is:
Display the pdf in the browser
$snappy = new Pdf('/usr/local/bin/wkhtmltopdf');
header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename="file.pdf"');
echo $snappy->getOutput('http://www.github.com');
You create a BinaryResponse but you send a JsonResponse. Since JsonResponse will set the content type to document/json you get an error.
You probably want to do something similar to this:
$str = base64_encode(file_get_contents("path to pdf"));
$response = new Response($str);
$response->headers->set('Content-Type', 'application/pdf');
$response->trustXSendfileTypeHeader();
return $response;
I want to achieve:
in a html-form put in some data (e.g. -wahl- and -id- )
after klicking -submit- call the javascript function -machExport-
this function validates the values and passes them (-wahl- and -id-) to the php-File -makeExport.php-
the -php-Funktion gets these values, gets some data from a mysql database, creates output-data,
writes these data into a file -data.txt- and download this file instantly to the users download-folder.
Everything works quite well, but:
after creating the data, this data is stored into the file but there is no downloading.
So, what's wrong.
(If I execute the -php-file directly by passing some values to the php-function, it works quite well,
so only if there ist the javascript function between the html- and the php-function, ist doesn't work )
Part of the code within my -html- document
<form name="form" action="" method="post" onsubmit="return machExport()" onreset="abbruch()">
Javascript-Code:
function machExport(){
var wahl = $("input[name='rd1']:checked").val();
var id = $("#id").val();
// verify these values and give an error message, if necessary
...
// if everything is ok, pass values to the -php- function
var ajxFile = 'makeExport.php';
var param = wahl + "#" + id;
$.ajax({
type: "POST",
url: ajxFile,
data: param
// if I put here a -success: function -statement,
// then the data having been created within my php-function
// is not beeing written into the requested file
// but is displayed in my html-document.
}
});
return false;
}
PHP-File -makeExport.php-
<?php
// get the values for -wahl- and -id-
...
// create data to write into file
$data = ...
// write data to file and download this file instantly
$file = "data.txt";
$fOK = file_put_contents ( $file , $data );
// up to here, it works
// but the next 3 lines are not excecuted
header("Content-Type: text/plain");
header("Content-Disposition: attachment; filename=\"$file\"");
readfile($file);
?>
I have some problems when I try to display multiple images (well it doesn't work for one image so multiple is impossible), and what I'm doing is with my function of AJAX to recover from my db, all the images location string that are in the table images. Then it calls another function called setImages() which receives those strings of the image locations and I use iterate over the strings (using jQuery's .each()) to trigger an AJAX request that calls a php script named image.php?img=[data]. data is the string containing the image location, so I have something like the code below:
The problem is that setImages() of my js, doesn't show the images
the PHP file:
<?php
$init="/var/Imagenes/cursos/";
$img=$_GET['img'];
$path=$init.$img;
echo $path;
//el path debe ser autores/ or cursos/
$name="azure";
/*
header("Cache-Control: no-cache, must-revalidate");
header("X-Sendfile: $path");
header("Content-Type: image/jpeg");
header("Content-Disposition: inline; filename='archivos'");
*/
//el nombre de la base de datos de la imagen
header("Cache-Control: no-cache, must-revalidate");
if((isset($path)&& !is_null($path))){
header("X-Sendfile: $path");
if(strpos( $img, ".png" )||strpos( $img, ".PNG" )){
header("Content-Type: image/PNG;base64");
}
elseif(strpos( $img, ".jpg" )||strpos( $img, ".JPG" )){
header("Content-Type: image/jpg;base64");
}
elseif(strpos( $img, ".jpeg" )||strpos( $img, ".JPEG" )){
header("Content-Type: image/jpeg;base64");
}
else{
return "error.jpg";
}
$newimg=rand(1000 , 9999 );
header("Content-Disposition: inline; fileimg= $newimg-$img");
exit();
}
else{
echo "no se pudo realizar la consulta";}
JS code:
functions listImgCursos works fine...
function listImgCursos(identificador) {
var resultado= $.ajax({
url: consultaBasica,
cache: false,
type: 'POST',
data : { action: "imgCursos"}
}).then(
function(data){// Success
var flagErrFound = false;
var nf404 = "" ;
$.each(data,
function(index,datos){
if((datos['id']===null)||(datos['img']=="")||(datos['img']==null)){
nf404 = datos['id'];
flagErrFound= true;
}//if close
}//function close
)//each close
if(flagErrFound===true){
error = {error: "CX02", msj: "Failed to get data from records.", data: nf404 };
return $.Deferred().reject(error);
}
else
return data;
},//function sucessful
function(){// fail
error = {error: "CX01", msj: "Failed to execute ajax"};
return $.Deferred().reject(error);
}//function fail
);//then;
resultado.done(
function (data){//success
setImages(data);
}//function DONE
);
resultado.fail(
function(e){//function fail
console.log(e.msj + " "+ e.error + ":" + e.data );
}//function FAIL)
);
}
function setImages(data){
$.each(data, function (index, datos) {
var temp="../classes/imagen.php?img="+encodeURIComponent(datos['img'])+"&t="+((new Date).getTime());
console.log(temp); // returns something like: ../classes/imagen.php?img=curso-2561.jpg&t=1489074434134
$.ajax({
url: temp,
type: "GET",
dataType: "image/jpg;base64",
async:true,
cache: false,
success: function(datai){
console.log(datai);
$('#pickimg').append('<img src="data:image/png;base64,' + datai + '" />');
},
fail: function(){
}
});
});
The problem is that setImages() of my js, doesn't show the images
This is because of multiple reasons:
The PHP code isn't actually returning the file contents. To do that, use a function like file_get_contents(),
readfile(), etc. Also, the string should be base-64 encoded so use base64_encode().
$newimg=rand(1000 , 9999 );
header("Content-Disposition: inline; fileimg= $newimg-$img");
echo base64_encode(file_get_contents($path));
exit();
This may be redundant with the first bullet, but the Syntax for header Content-Disposition only contains three directives: name, filename and filename*.1. So that fileimg directive is invalid. That header could include the filename directive but because a string is being returned it would be useless:
header("Content-Disposition: inline; filename=\"$newimg-$img\"");
In that sense it isn't really returning an image, so the headers for Content-Type are basically incorrect. Consequently, the AJAX call (using $.ajax()) should not specify the dataType (i.e. dataType: "image/jpg;base64" which wouldn't be dynamic anyway - for jpgs, pngs, etc). So remove that dataType option.
See a demonstratation of this with the modifications applied in this phpFiddle. Click the button labeled Run - F9 - and then when the frame loads, click the button labeled Update to trigger an AJAX call to the PHP script which will load a PNG image and append it to the element with id attribute "pickimg".
1https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#Directives
I've seen a lot of answers of this type of questions but none worked for me. I've a CSV object which has a createCSV function like this :
public function createCSV($url, $delimiter = ","){
$file = fopen($url, 'w');
foreach ($this->content as $line) {
fputcsv($file, $line, $delimiter);
}
fclose($file);
}
And I want to download it directly from the browser so here is what I do :
header('Content-type: text/csv');
header('Content-Disposition: attachment; filename="'.$filename.'"');
$csv_file->createCSV('php://output');
This part of code is execute with an AJAX call and even if the header is set to text/csv the download doesn't work but in the response tab I can see the content of my csv. I've tried with different header but none of them worked. How can I do to download the CSV ?
EDIT
The thing is that I don't have a URL for my CSV and I don't want to store the file somewhere, I just want to build the file and download directly with the browser
Try this code:
$('#exportcsv').click(function(){
var self = this;
$.ajax({
url : '/exportcsv',
method : 'get',
success : function(response)
{
console.log(response);
var csvData = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(response);
$(self).attr({
'download': 'publisher.csv',
'href': csvData,
'target': '_blank'
});
// window.open(uri, 'test.csv');
}
})
})