https://blog.codehunger.in/how-to-create-custom-module-in-laravel-9/
Wednesday, March 9, 2022
Tuesday, March 8, 2022
Download Files with Axios and Vue
If you need to download image or any file from url or blob in Node.js, React.js etc then you can do it using Axios. We can also use get or post request for download file in Vue.js axios. it will also use with Laravel Vue download file.
As we know *Axios *is a very popular for http request. you can fire get, post, put etc request using Axios in Vue.js, Node.js, react js etc. But if you need same requirement to download file response from api and user to give download using Axios then how you can do that? I will help you to do file downloading using Axios.
You can see bellow peace of code for Axios request example:
axios({
url: 'http://localhost:8000/api/get-file',
method: 'GET',
responseType: 'blob',
}).then((response) => {
var fileURL = window.URL.createObjectURL(newBlob([response.data]));
var fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.setAttribute('download', 'file.pdf');
document.body.appendChild(fileLink);
fileLink.click(); });You can also see full example with Vue.js here:
Make sure you need to create your local pdf file url or you can give any live url for download.
Let’s see bellow code:
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to Download File using Axios Vue JS? -
blog.codehunger.in
</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="app">
<button @click="onClick()">
DownLoad
</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
onClick() {
axios({
url: 'http://localhost:8000/my.pdf',
method: 'GET',
responseType: 'blob',
}).then((response) => {
var fileURL = window.URL.createObjectURL(new
Blob([response.data]));
var fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.setAttribute('download', 'file.pdf');
document.body.appendChild(fileLink);
fileLink.click();
});
}
}
})
</script>
</body>
</html>Create a Zip File Using PHP
Creating .ZIP archives using PHP can be just as simple as creating them on your desktop. PHP’s ZIP class provides all the functionality you need! To make the process a bit faster for you, I’ve coded a simple create_zip function for you to use on your projects.
create_zip function
PHP
/* creates a compressed zip file */function create_zip($files = array(),$destination = '',$overwrite = false) { //if the zip file already exists and overwrite is false, return false if(file_exists($destination) && !$overwrite) { return false; } //vars $valid_files = array(); //if files were passed in... if(is_array($files)) { //cycle through each file foreach($files as $file) { //make sure the file exists if(file_exists($file)) { $valid_files[] = $file; } } } //if we have good files... if(count($valid_files)) { //create the archive $zip = new ZipArchive(); if($zip->open($destination,$overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) { return false; } //add the files foreach($valid_files as $file) { $zip->addFile($file,$file); } //debug //echo 'The zip archive contains ',$zip->numFiles,' files with a status of ',$zip->status; //close the zip -- done! $zip->close(); //check to make sure the file exists return file_exists($destination); } else { return false; }}Example code :
PHP
$files_to_zip = array( 'file-1.jpg', 'file-2.jpg', 'file-3.pdf',);//if true, good; if false, zip creation failed$result = create_zip($files_to_zip,'my-archive-file.zip');The function accepts an array of files, the name of the destination files, and whether or not you’d like the destination file to be overwritten if a file of the same name exists. The function returns true if the file was created, false if the process runs into any problems.
This functionality is great for web-based file managers. If you have any issue feel free to comment.
Subscribe to:
Posts (Atom)
-
Composer is a major part of the Laravel MVC Framework, but it also exists without Laravel. In fact you could use it in any project. This a...
-
How to Answer Technical Questions Like a Pro Answering technical interview questions is all about showing off your problem-solving skills an...
-
Vuetify is a popular UI framework for Vue apps. In this article, we’ll look at how to work with the Vuetify framework. Color Picker Inputs W...