I'm using an API call (cURL, server-side) to receive an XML file. The XML file has a base64 encoded PDF embedded within, and I'm extracting this file from the XML, and then saving it on the server for later downloading.
I'm doing it like this:
<?php
$pdfContents = $content["DocumentHeader"]["DocumentPdf"]; // base64 string PDF
$endDocument = base64_decode($pdfContents);
$realName = 'some_random_string.pdf';
$filename = 'adjusted_name.pdf';
file_put_contents($realName,$endDocument);
header('Content-Description: File Transfer');
header('Content-type: application/octetstream');
header('Content-Disposition: attachment; filename='.$filename);
header('Connection: Keep-Alive');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Transfer-Encoding: binary');
readfile($realName);
unlink($realName);
die();
?>
The front-end is receiving the file like so:
$.ajax({
url: 'get-file.php',
type: 'GET',
data: {},
success:function(data,status,xhr) {
var blob = new Blob([data], { type:'application/pdf' });
var downloadUrl = URL.createObjectURL(blob);
window.location.href = downloadUrl;
}
});
While this does download a PDF file, that file is broken. By broken, I mean that the contents are not entirely valid.
See the following image. On the right is the broken file, and on the left is what the file should display, when open in, say, Sublime Text 3 (or any other text editor).
I'm guessing I'm doing something wrong with the way I'm creating the Blob, or (not) processing the data, but I'm unsure what.
Here are some of the things I've tried:
Changing the header('Content-type') to application/pdf
Removing / commenting out the header('Content-Transfer-Encoding')
Using the TextEncoder and TextDecoder
Changing the front-end JS handling of data to:
var dataArray = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
dataArray[i] = data.charCodeAt(i);
}
var blob = new Blob([dataArray], { type:'application/pdf' });
You might ask why am I not simply passing the link to the PDF, and simulating a click on a hidden <a href>, or why am I not setting the responseType to blob, or why am I even using AJAX to begin with.
The answer to the first question is twofold - there are multiple simultaneous users (in the hundreds), and I'd like to avoid them knowing the real filename, and also to avoid keeping that file on the server for an indefinite period of time.
The second issue (responseType) - my response is not always a PDF file. It might be a JSON, containing a message for the user - the XML was not downloaded, there was an error while retrieving the parameters needed for the XML API call, etc, etc.
The third issue - I want this to work without the need for target blanks and wondering whether the user's browser will block the opening of a new tab, and I also want to keep the user on the page from which they initiated the download etc.
Finally, my question.
What do I need to change in the Blob creating part of my code, in order to get a functional PDF? I'm guessing it's an encoding issue, but I'm unsure how to go about fixing it.
EDIT
I've experimented with the conversion to blob, and after changing it to this:
var byteString = data;
var arrayBuffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
var blob = new Blob([intArray], { type:'application/pdf' });
I still get a broken PDF, but with a slightly different encoding issue, like in the following image.
Managed to resolve the issue.
Despite my initial doubts, the problem was indeed on the server. Specifically, this part:
header('Content-Transfer-Encoding: binary');
readfile($realName);
I was sending the stream, which made it impossible for the front-end logic to convert it correctly to what I needed. The thing that gave it away (apart from the helpful comments) was logging the contents of xhr.responseText to the console - instead of the expected format of the PDF contents, I noticed that there were diamonds / improperly converted characters.
With that in mind, I changed my code like this:
<?php
$pdfContents = $content["DocumentHeader"]["DocumentPdf"]; // base64 string PDF
//$endDocument = base64_decode($pdfContents); <== not needed in this case
//$realName = 'some_random_string.pdf'; <== not needed in this case
$filename = 'adjusted_name.pdf';
//file_put_contents($realName,$endDocument); <== not needed in this case
header('Content-Description: File Transfer');
header('Content-type: application/octetstream');
header('Content-Disposition: attachment; filename='.$filename);
header('Connection: Keep-Alive');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
//header('Content-Transfer-Encoding: binary'); <== not good in this case
//readfile($realName); <== not good in this case
echo $pdfContents; // <== base64 representation of the raw PDF contents
unlink($realName);
die();
?>
Then, in the front-end code, I made additional changes:
$.ajax({
url: 'get-file.php',
type: 'GET',
data: {},
success:function(data,status,xhr) {
//var blob = new Blob([data], { type:'application/pdf' });
var byteString = atob(data);
var intArray = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
var blob = new Blob([intArray], { type:'application/pdf' });
var downloadUrl = URL.createObjectURL(blob);
window.location.href = downloadUrl;
}
});
This forces the download of the received PDF, which looks like expected upon opening.
Related
I have a web app, where pdfs need to be generated dynamically. Data is gathered in javascript and send with a post request to the server. Here mpdf is used to generate a pdf. If I save the file locally: php $mpdf->Output($filename, \Mpdf\Output\Destination::FILE); it works.
But if I send it to the browser php $mpdf->Output($filename, \Mpdf\Output\Destination::DOWNLOAD); and take the output in the jquery callback to do the following (borrowed from https://nehalist.io/downloading-files-from-post-requests/):
jQuery.post(my_axax_url, data, function(data) {
var blob = new Blob([data], { type: 'application/pdf' });
var l = document.createElement('a');
l.href = window.URL.createObjectURL(blob);
l.download = 'test.pdf';
document.body.appendChild(l);
l.click();
});
The downloaded pdf is empty (blank page), and has corrupted author information (that makes it look, like an encoding problem). I ran https://www.datalogics.com/products/pdftools/pdf-checker/, which only gave me it the javascript generated pdf is a "Damaged document".
I hope, that this is an easy problem. I am used to php and text documents, not pdf.
Thanks!
Try adding the following to the start of your php script, it may be some sort of encoding issue:
ob_clean();
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="test.pdf"');
header('Content-Transfer-Encoding: binary');
header('Accept-Ranges: bytes');
I use PHP to get it, because I need to download a PDF file from another server. To download this file I need to be logged in and the client shouldn't have to log in there.
The problem is that the PDF file the user gets is just a white page.
On my server there is still content inside when i write it in a file (file_put_contents("test.pdf",$content);)
I tried to base64 encode it before I send it and recognized that the delivered data is still correct. So it fails at the decoding (atob(data)) or in the download function.
(I also tried utf8 encodings)
In the downloaded pdf file, many characters are exchanged with these boxes or question marks(��).
$result = curl_exec($ch);
file_put_contents("test.pdf",$result); //test.pdf contains correct document
echo base64_encode($result);
download(atob(data),"My.pdf") //data is answer of ajax request
function download(data, filename, type) {
var file = new Blob([data], {
type: type
});
if (window.navigator.msSaveOrOpenBlob) // IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else { // Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
The problem is the implicit UTF8 encoding in the BLOB constructor.
More information here.
To display a pdf (or any other file type), you will have to set the content type and so on in response header for the browser to resolve it correctly and display. This is a small portion of a code I wrote for delivering pdf content to the user.
$file = '/home/public_html/DriveMode/DRIVES/java.pdf'; //path to file
$filename = 'filename.pdf';
header('Content-type: application/pdf'); //setting content type in header
header('Content-Disposition: inline; filename="' . $filename . '"');
header('Content-Transfer-Encoding: binary');
header('Accept-Ranges: bytes');
readfile($file); // reads and writes the file to output buffer
Hope this helps you and do let me know in comments if something is confusing here.
I am trying to build a PDF file out of a binary stream which I receive as a response from an Ajax request.
Via XmlHttpRequest I receive the following data:
%PDF-1.4....
.....
....hole data representing the file
....
%% EOF
What I tried so far was to embed my data via data:uri. Now, there's nothing wrong with it and it works fine. Unfortunately, it does not work in IE9 and Firefox. A possible reason may be that FF and IE9 have their problems with this usage of the data-uri.
Now, I'm looking for any solution that works for all browsers. Here's my code:
// responseText encoding
pdfText = $.base64.decode($.trim(pdfText));
// Now pdfText contains %PDF-1.4 ...... data...... %%EOF
var winlogicalname = "detailPDF";
var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,'+
'resizable,screenX=50,screenY=50,width=850,height=1050';
var htmlText = '<embed width=100% height=100%'
+ ' type="application/pdf"'
+ ' src="data:application/pdf,'
+ escape(pdfText)
+ '"></embed>';
// Open PDF in new browser window
var detailWindow = window.open ("", winlogicalname, winparams);
detailWindow.document.write(htmlText);
detailWindow.document.close();
As I have said, it works fine with Opera and Chrome (Safari hasn't been tested). Using IE or FF will bring up a blank new window.
Is there any solution like building a PDF file on a file system
in order to let the user download it? I need the solution that works in all browsers, at least in IE, FF, Opera, Chrome and Safari.
I have no permission to edit the web-service implementation. So it had to be a solution at client-side. Any ideas?
Is there any solution like building a pdf file on file system in order
to let the user download it?
Try setting responseType of XMLHttpRequest to blob , substituting download attribute at a element for window.open to allow download of response from XMLHttpRequest as .pdf file
var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true);
request.responseType = "blob";
request.onload = function (e) {
if (this.status === 200) {
// `blob` response
console.log(this.response);
// create `objectURL` of `this.response` : `.pdf` as `Blob`
var file = window.URL.createObjectURL(this.response);
var a = document.createElement("a");
a.href = file;
a.download = this.response.name || "detailPDF";
document.body.appendChild(a);
a.click();
// remove `a` following `Save As` dialog,
// `window` regains `focus`
window.onfocus = function () {
document.body.removeChild(a)
}
};
};
request.send();
I realize this is a rather old question, but here's the solution I came up with today:
doSomethingToRequestData().then(function(downloadedFile) {
// create a download anchor tag
var downloadLink = document.createElement('a');
downloadLink.target = '_blank';
downloadLink.download = 'name_to_give_saved_file.pdf';
// convert downloaded data to a Blob
var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });
// create an object URL from the Blob
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
// set object URL as the anchor's href
downloadLink.href = downloadUrl;
// append the anchor to document body
document.body.append(downloadLink);
// fire a click event on the anchor
downloadLink.click();
// cleanup: remove element and revoke object URL
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);
}
I changed this:
var htmlText = '<embed width=100% height=100%'
+ ' type="application/pdf"'
+ ' src="data:application/pdf,'
+ escape(pdfText)
+ '"></embed>';
to
var htmlText = '<embed width=100% height=100%'
+ ' type="application/pdf"'
+ ' src="data:application/pdf;base64,'
+ escape(pdfText)
+ '"></embed>';
and it worked for me.
The answer of #alexandre with base64 does the trick.
The explanation why that works for IE is here
https://en.m.wikipedia.org/wiki/Data_URI_scheme
Under header 'format' where it says
Some browsers (Chrome, Opera, Safari, Firefox) accept a non-standard
ordering if both ;base64 and ;charset are supplied, while Internet
Explorer requires that the charset's specification must precede the
base64 token.
I work in PHP and use a function to decode the binary data sent back from the server. I extract the information an input to a simple file.php and view the file through my server and all browser display the pdf artefact.
<?php
$data = 'dfjhdfjhdfjhdfjhjhdfjhdfjhdfjhdfdfjhdf==blah...blah...blah..'
$data = base64_decode($data);
header("Content-type: application/pdf");
header("Content-Length:" . strlen($data ));
header("Content-Disposition: inline; filename=label.pdf");
print $data;
exit(1);
?>
Detect the browser and use Data-URI for Chrome and use PDF.js as below for other browsers.
PDFJS.getDocument(url_of_pdf)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// get a viewport
var scale = 1.5;
var viewport = page.getViewport(scale);
// get or create a canvas
var canvas = ...;
canvas.width = viewport.width;
canvas.height = viewport.height;
// render a page
page.render({
canvasContext: canvas.getContext('2d'),
viewport: viewport
});
})
.catch(function(err) {
// deal with errors here!
});
I saw another question on just this topic recently (streaming pdf into iframe using dataurl only works in chrome).
I've constructed pdfs in the ast and streamed them to the browser. I was creating them first with fdf, then with a pdf class I wrote myself - in each case the pdf was created from data retrieved from a COM object based on a couple of of GET params passed in via the url.
From looking at your data sent recieved in the ajax call, it looks like you're nearly there. I haven't played with the code for a couple of years now and didn't document it as well as I'd have cared to, but - I think all you need to do is set the target of an iframe to be the url you get the pdf from. Though this may not work - the file that oututs the pdf may also have to outut a html response header first.
In a nutshell, this is the output code I used:
//We send to a browser
header('Content-Type: application/pdf');
if(headers_sent())
$this->Error('Some data has already been output, can\'t send PDF file');
header('Content-Length: '.strlen($this->buffer));
header('Content-Disposition: inline; filename="'.$name.'"');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
ini_set('zlib.output_compression','0');
echo $this->buffer;
So, without seeing the full response text fro the ajax call I can't really be certain what it is, though I'm inclined to think that the code that outputs the pdf you're requesting may only be doig the equivalent of the last line in the above code. If it's code you have control over, I'd try setting the headers - then this way the browser can just deal with the response text - you don't have to bother doing a thing to it.
I simply constructed a url for the pdf I wanted (a timetable) then created a string that represented the html for an iframe of the desired sie, id etc that used the constructed url as it's src. As soon as I set the inner html of a div to the constructed html string, the browser asked for the pdf and then displayed it when it was received.
function showPdfTt(studentId)
{
var url, tgt;
title = byId("popupTitle");
title.innerHTML = "Timetable for " + studentId;
tgt = byId("popupContent");
url = "pdftimetable.php?";
url += "id="+studentId;
url += "&type=Student";
tgt.innerHTML = "<iframe onload=\"centerElem(byId('box'))\" src='"+url+"' width=\"700px\" height=\"500px\"></iframe>";
}
EDIT: forgot to mention - you can send binary pdf's in this manner. The streams they contain don't need to be ascii85 or hex encoded. I used flate on all the streams in the pdf and it worked fine.
You can use PDF.js to create PDF files from javascript... it's easy to code... hope this solve your doubt!!!
Regards!
I am trying to build a PDF file out of a binary stream which I receive as a response from an Ajax request.
Via XmlHttpRequest I receive the following data:
%PDF-1.4....
.....
....hole data representing the file
....
%% EOF
What I tried so far was to embed my data via data:uri. Now, there's nothing wrong with it and it works fine. Unfortunately, it does not work in IE9 and Firefox. A possible reason may be that FF and IE9 have their problems with this usage of the data-uri.
Now, I'm looking for any solution that works for all browsers. Here's my code:
// responseText encoding
pdfText = $.base64.decode($.trim(pdfText));
// Now pdfText contains %PDF-1.4 ...... data...... %%EOF
var winlogicalname = "detailPDF";
var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,'+
'resizable,screenX=50,screenY=50,width=850,height=1050';
var htmlText = '<embed width=100% height=100%'
+ ' type="application/pdf"'
+ ' src="data:application/pdf,'
+ escape(pdfText)
+ '"></embed>';
// Open PDF in new browser window
var detailWindow = window.open ("", winlogicalname, winparams);
detailWindow.document.write(htmlText);
detailWindow.document.close();
As I have said, it works fine with Opera and Chrome (Safari hasn't been tested). Using IE or FF will bring up a blank new window.
Is there any solution like building a PDF file on a file system
in order to let the user download it? I need the solution that works in all browsers, at least in IE, FF, Opera, Chrome and Safari.
I have no permission to edit the web-service implementation. So it had to be a solution at client-side. Any ideas?
Is there any solution like building a pdf file on file system in order
to let the user download it?
Try setting responseType of XMLHttpRequest to blob , substituting download attribute at a element for window.open to allow download of response from XMLHttpRequest as .pdf file
var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true);
request.responseType = "blob";
request.onload = function (e) {
if (this.status === 200) {
// `blob` response
console.log(this.response);
// create `objectURL` of `this.response` : `.pdf` as `Blob`
var file = window.URL.createObjectURL(this.response);
var a = document.createElement("a");
a.href = file;
a.download = this.response.name || "detailPDF";
document.body.appendChild(a);
a.click();
// remove `a` following `Save As` dialog,
// `window` regains `focus`
window.onfocus = function () {
document.body.removeChild(a)
}
};
};
request.send();
I realize this is a rather old question, but here's the solution I came up with today:
doSomethingToRequestData().then(function(downloadedFile) {
// create a download anchor tag
var downloadLink = document.createElement('a');
downloadLink.target = '_blank';
downloadLink.download = 'name_to_give_saved_file.pdf';
// convert downloaded data to a Blob
var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });
// create an object URL from the Blob
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
// set object URL as the anchor's href
downloadLink.href = downloadUrl;
// append the anchor to document body
document.body.append(downloadLink);
// fire a click event on the anchor
downloadLink.click();
// cleanup: remove element and revoke object URL
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);
}
I changed this:
var htmlText = '<embed width=100% height=100%'
+ ' type="application/pdf"'
+ ' src="data:application/pdf,'
+ escape(pdfText)
+ '"></embed>';
to
var htmlText = '<embed width=100% height=100%'
+ ' type="application/pdf"'
+ ' src="data:application/pdf;base64,'
+ escape(pdfText)
+ '"></embed>';
and it worked for me.
The answer of #alexandre with base64 does the trick.
The explanation why that works for IE is here
https://en.m.wikipedia.org/wiki/Data_URI_scheme
Under header 'format' where it says
Some browsers (Chrome, Opera, Safari, Firefox) accept a non-standard
ordering if both ;base64 and ;charset are supplied, while Internet
Explorer requires that the charset's specification must precede the
base64 token.
I work in PHP and use a function to decode the binary data sent back from the server. I extract the information an input to a simple file.php and view the file through my server and all browser display the pdf artefact.
<?php
$data = 'dfjhdfjhdfjhdfjhjhdfjhdfjhdfjhdfdfjhdf==blah...blah...blah..'
$data = base64_decode($data);
header("Content-type: application/pdf");
header("Content-Length:" . strlen($data ));
header("Content-Disposition: inline; filename=label.pdf");
print $data;
exit(1);
?>
Detect the browser and use Data-URI for Chrome and use PDF.js as below for other browsers.
PDFJS.getDocument(url_of_pdf)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
// get a viewport
var scale = 1.5;
var viewport = page.getViewport(scale);
// get or create a canvas
var canvas = ...;
canvas.width = viewport.width;
canvas.height = viewport.height;
// render a page
page.render({
canvasContext: canvas.getContext('2d'),
viewport: viewport
});
})
.catch(function(err) {
// deal with errors here!
});
I saw another question on just this topic recently (streaming pdf into iframe using dataurl only works in chrome).
I've constructed pdfs in the ast and streamed them to the browser. I was creating them first with fdf, then with a pdf class I wrote myself - in each case the pdf was created from data retrieved from a COM object based on a couple of of GET params passed in via the url.
From looking at your data sent recieved in the ajax call, it looks like you're nearly there. I haven't played with the code for a couple of years now and didn't document it as well as I'd have cared to, but - I think all you need to do is set the target of an iframe to be the url you get the pdf from. Though this may not work - the file that oututs the pdf may also have to outut a html response header first.
In a nutshell, this is the output code I used:
//We send to a browser
header('Content-Type: application/pdf');
if(headers_sent())
$this->Error('Some data has already been output, can\'t send PDF file');
header('Content-Length: '.strlen($this->buffer));
header('Content-Disposition: inline; filename="'.$name.'"');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
ini_set('zlib.output_compression','0');
echo $this->buffer;
So, without seeing the full response text fro the ajax call I can't really be certain what it is, though I'm inclined to think that the code that outputs the pdf you're requesting may only be doig the equivalent of the last line in the above code. If it's code you have control over, I'd try setting the headers - then this way the browser can just deal with the response text - you don't have to bother doing a thing to it.
I simply constructed a url for the pdf I wanted (a timetable) then created a string that represented the html for an iframe of the desired sie, id etc that used the constructed url as it's src. As soon as I set the inner html of a div to the constructed html string, the browser asked for the pdf and then displayed it when it was received.
function showPdfTt(studentId)
{
var url, tgt;
title = byId("popupTitle");
title.innerHTML = "Timetable for " + studentId;
tgt = byId("popupContent");
url = "pdftimetable.php?";
url += "id="+studentId;
url += "&type=Student";
tgt.innerHTML = "<iframe onload=\"centerElem(byId('box'))\" src='"+url+"' width=\"700px\" height=\"500px\"></iframe>";
}
EDIT: forgot to mention - you can send binary pdf's in this manner. The streams they contain don't need to be ascii85 or hex encoded. I used flate on all the streams in the pdf and it worked fine.
You can use PDF.js to create PDF files from javascript... it's easy to code... hope this solve your doubt!!!
Regards!
Been struggling with this problem for a while.
I am trying to force a file download through javascript and PHP.
If I visit the PHP page directly it works but I want the download to start when on a different page but without success.
The URL to the file depends on a value taken from a SELECT item, however this part works as expected so I am leaving it out of the question.
Javascript
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", postUrl, true); //postUrl = http://www.example.com/downloadFile.php?url=http://www.example.com/files/test.eps
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send();
PHP
$url = "http://www.example.com/files/test.eps";
$filesize= strlen(file_get_contents($url));
header('Content-Description: File Transfer');
header('Content-Type: application/force-download');
header('Content-Disposition: attachment; filename='.basename($url));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . $filesize);
readfile($url);
I have been testing with both GET and POST (not sure which one would be best, feel free to correct me) but for now I am trying to get the GET to work.
Like I said, if I visit "http://www.example.com/downloadFile.php" directly the file is downloaded and if I do console.log(xmlHttp.responseText) the file contents is written to the console, but the file is not downloaded when making the request from the other page.
Any help would be greatly appreciated.
Turns out I used the link posted by #Vivasaayi, however I did it with a slight twist. Instead of using an Iframe I used a regular a href. PHP-file is unchanged.
Javascript
var downloadLinkID = 'hiddenDownloadLink', downloadHref = document.getElementById(downloadLinkID);
if (downloadHref === null)
{
downloadHref = document.createElement('a');
downloadHref.id = downloadLinkID;
downloadHref.setAttribute('href', postUrl + params);
downloadHref.setAttribute('onclick', firefoxDownload(postUrl + params)); // FF/IE must have onclick event to make link clickable
downloadHref.click();
}
function firefoxDownload(url)
{
window.location.href = url; //Needed for FF/IE to force download of file
}