I'd like to download a pdf file with javascript. The file content will be encoded in base64.
Please help me to investagate why I can't download the pdf file.
index.php:
<?php
$file_content = base64_encode(file_get_contents("1.pdf"));
?>
<!DOCTYPE>
<html>
<head>
<title>Download PDF </title>
</head>
<body>
<div>Hello World!</div>
<input type="button" onclick="download()" value="download"/>
<script>
function download() {
var str = "<?php echo $file_content;?>";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var data = window.atob(str);
var blob = new Blob([data], {type: "application/pdf"});
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "download.pdf";
a.click();
window.URL.revokeObjectURL(url);
}
</script>
</body>
</html>
I'd like to download a pdf file with javascript. The file content will be encoded in base64.
Please help me to investagate why I can't download the pdf file.
index.php:
<?php
$file_content = base64_encode(file_get_contents("1.pdf"));
?>
<!DOCTYPE>
<html>
<head>
<title>Download PDF </title>
</head>
<body>
<div>Hello World!</div>
<input type="button" onclick="download()" value="download"/>
<script>
function download() {
var str = "<?php echo $file_content;?>";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var data = window.atob(str);
var blob = new Blob([data], {type: "application/pdf"});
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "download.pdf";
a.click();
window.URL.revokeObjectURL(url);
}
</script>
</body>
</html>
- I mentioned it needs to download by using javascript. Why did you mented to use a link? – bluestar0505 Commented Jul 23, 2019 at 14:18
2 Answers
Reset to default 3Based on this Medium post, here's a solution that uses the base64 string directly:
function download() {
var a = document.createElement("a");
a.style = "display: none";
a.href = "data:application/pdf;base64,<?= $file_content ?>";
a.download = "download.pdf";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
Further reading: Data_URIs
download attribute will help you to download the file.
var link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));
Another possible solution:
If you want to download it using blob content than return response must be declared as arraybuffer
Example:
$http.post('/postmethod',{params}, {responseType: 'arraybuffer'})
.success(function (data) {
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
});
Open the PDF file into new window from where you can save it.