Ketika membangun sebuah aplikasi web, Anda seringkali harus memberikan pengguna kemampuan untuk men-download bagian dari data sebagai file. Ini bisa menjadi cadangan pengaturan konfigurasi, laporan, atau bagian lain dari informasi yang dihasilkan secara dinamis.
Solusi yang biasa untuk masalah ini akan memiliki script ekspor khusus yang memilih dari database dan membangun file yang Anda butuhkan. Namun, seperti kita akan membuktikan di tutorial singkat ini, ada cara lain.
Kami akan membuat sebuah plugin jQuery yang, dikombinasikan dengan script php sederhana, dapat menghasilkan setiap jenis file tekstual, dan membuatnya tersedia untuk di-download. Anda akan memulai download dari front end Anda JavaScript dengan hanya menyediakan isi file, dan meninggalkan sisanya untuk plugin.
HTML
Solusi yang biasa untuk masalah ini akan memiliki script ekspor khusus yang memilih dari database dan membangun file yang Anda butuhkan. Namun, seperti kita akan membuktikan di tutorial singkat ini, ada cara lain.
Kami akan membuat sebuah plugin jQuery yang, dikombinasikan dengan script php sederhana, dapat menghasilkan setiap jenis file tekstual, dan membuatnya tersedia untuk di-download. Anda akan memulai download dari front end Anda JavaScript dengan hanya menyediakan isi file, dan meninggalkan sisanya untuk plugin.
HTML
Kita akan mulai dengan meletakkan sebuah halaman HTML sederhana dengan textarea dan tombol download, sehingga kita dapat menunjukkan plugin di tempat kerja.
Halaman menggunakan DOCTYPE HTML5, seperti kita menggunakan beberapa tag yang didefinisikan oleh standar. Untuk itu untuk bekerja di IE, kita juga perlu menyertakan script HTML5 memungkinkan di bagian kepala.
Sebelum tag penutup tubuh, kita menambahkan perpustakaan jQuery, plugin generateFile kita akan menulis dalam sekejap, dan file script.js yang mendengarkan acara dan memicu download file.
download.php
Apa ini script PHP tidak hanya menambahkan beberapa header di atas pernyataan echo. Plugin kita sedang membangun harus lulus dua parameter bersama dengan permintaan POST: nama file dan konten. Script akan mencetak isi file, sedangkan tiga pengaturan header yang akan memaksa kotak file download muncul (bukan dari browser Anda hanya membukanya).
Untuk menggunakan plugin Anda perlu untuk meng-upload file ini di suatu tempat di server Anda dan lulus URL-nya ke plugin kita akan coding berikutnya.
jQuery
Seperti yang Anda lihat di bagian sebelumnya, plugin kami telah mengeluarkan permintaan POST untuk download.php. Pilihan alami untuk membuat permintaan akan dengan menggunakan AJAX. Namun, ada kelemahan untuk menggunakan metode ini - tidak memicu dialog download file muncul.
Jadi apa yang kita butuhkan adalah sebuah sekolah sedikit lebih lama. Kami akan secara dinamis menciptakan iframe tersembunyi dan menulis suatu bentuk untuk itu, yang kemudian kita akan menyerahkan melalui POST. Atribut aksi titik formulir untuk download.php, sehingga dialog file download akan muncul, persis seperti yang kita butuhkan untuk.
Sekarang mari kita meletakkan kode jQuery yang melakukan hal ini:
assets/jquery.generateFile.js
assets/script.js
Ketika memanggil $. GenerateFile, Anda harus lulus nama file (harus sesuatu yang deskriptif), isi teks, dan jalan menuju download.php. Seperti yang dapat Anda lihat pada contoh di atas, kita bisa menghasilkan berbagai jenis file, asalkan adalah teks.
Dengan plugin yang sederhana ini selesai!
kesimpulan
Anda dapat menggunakan kode ini untuk menambahkan fitur ekspor ke aplikasi web atau meningkatkan area tertentu dari situs Anda dengan fungsi download. Hal ini bahkan mungkin untuk menghasilkan file doc dan spreadsheet jika Anda mengikuti format XML Microsoft Office. Bagian yang terbaik adalah bahwa semuanya dilakukan dengan JavaScript dan Anda dapat dengan mudah menggabungkan berbagai sumber data.
Demo Download
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generating files with JS & PHP | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Generating Files with JavaScript</h1>
<h2><a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">« Read and download on Tutorialzine</a></h2>
</header>
<form action="./" method="post">
<textarea></textarea>
<a href="#" class="blueButton" id="download">Download</a>
</form>
<footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">Tutorialzine.com</a></b></footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="assets/js/jquery.generateFile.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>Generating files with JS & PHP | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Generating Files with JavaScript</h1>
<h2><a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">« Read and download on Tutorialzine</a></h2>
</header>
<form action="./" method="post">
<textarea></textarea>
<a href="#" class="blueButton" id="download">Download</a>
</form>
<footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">Tutorialzine.com</a></b></footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="assets/js/jquery.generateFile.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Halaman menggunakan DOCTYPE HTML5, seperti kita menggunakan beberapa tag yang didefinisikan oleh standar. Untuk itu untuk bekerja di IE, kita juga perlu menyertakan script HTML5 memungkinkan di bagian kepala.
Sebelum tag penutup tubuh, kita menambahkan perpustakaan jQuery, plugin generateFile kita akan menulis dalam sekejap, dan file script.js yang mendengarkan acara dan memicu download file.
download.php
if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}
// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9-_.]/i','',$_POST['filename']);
// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content'];
exit;
}
// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9-_.]/i','',$_POST['filename']);
// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content'];
Apa ini script PHP tidak hanya menambahkan beberapa header di atas pernyataan echo. Plugin kita sedang membangun harus lulus dua parameter bersama dengan permintaan POST: nama file dan konten. Script akan mencetak isi file, sedangkan tiga pengaturan header yang akan memaksa kotak file download muncul (bukan dari browser Anda hanya membukanya).
Untuk menggunakan plugin Anda perlu untuk meng-upload file ini di suatu tempat di server Anda dan lulus URL-nya ke plugin kita akan coding berikutnya.
jQuery
Seperti yang Anda lihat di bagian sebelumnya, plugin kami telah mengeluarkan permintaan POST untuk download.php. Pilihan alami untuk membuat permintaan akan dengan menggunakan AJAX. Namun, ada kelemahan untuk menggunakan metode ini - tidak memicu dialog download file muncul.
Jadi apa yang kita butuhkan adalah sebuah sekolah sedikit lebih lama. Kami akan secara dinamis menciptakan iframe tersembunyi dan menulis suatu bentuk untuk itu, yang kemudian kita akan menyerahkan melalui POST. Atribut aksi titik formulir untuk download.php, sehingga dialog file download akan muncul, persis seperti yang kita butuhkan untuk.
Sekarang mari kita meletakkan kode jQuery yang melakukan hal ini:
assets/jquery.generateFile.js
(function($){
// Creating a jQuery plugin:
$.generateFile = function(options){
options = options || {};
if(!options.script || !options.filename || !options.content){
throw new Error("Please enter all the required config options!");
}
// Creating a 1 by 1 px invisible iframe:
var iframe = $('<iframe>',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');
var formHTML = '<form action="" method="post">'+
'<input type="hidden" name="filename" />'+
'<input type="hidden" name="content" />'+
'</form>';
// Giving IE a chance to build the DOM in
// the iframe with a short timeout:
setTimeout(function(){
// The body element of the iframe document:
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// Adding the form to the body:
body.html(formHTML);
var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
// Submitting the form to download.php. This will
// cause the file download dialog box to appear.
form.submit();
},50);
};
})(jQuery);
// Creating a jQuery plugin:
$.generateFile = function(options){
options = options || {};
if(!options.script || !options.filename || !options.content){
throw new Error("Please enter all the required config options!");
}
// Creating a 1 by 1 px invisible iframe:
var iframe = $('<iframe>',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');
var formHTML = '<form action="" method="post">'+
'<input type="hidden" name="filename" />'+
'<input type="hidden" name="content" />'+
'</form>';
// Giving IE a chance to build the DOM in
// the iframe with a short timeout:
setTimeout(function(){
// The body element of the iframe document:
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// Adding the form to the body:
body.html(formHTML);
var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
// Submitting the form to download.php. This will
// cause the file download dialog box to appear.
form.submit();
},50);
};
})(jQuery);
Dalam waktu kurang dari 50 baris (dengan komentar dilucuti) fragmen di atas tidak apa yang kita butuhkan. Ini menciptakan iframe tersembunyi dengan bentuk di dalamnya.
Perhatikan fungsi setTimeout () . Tanpa itu kita tidak dapat mengakses elemen dokumen dari iframe di Internet Explorer. Dengan cara ini, kita memberikan waktu untuk membangun DOM dan membuatnya tersedia untuk kita.
Dan di sini adalah bagaimana menggunakan plugin ini:
Perhatikan fungsi setTimeout () . Tanpa itu kita tidak dapat mengakses elemen dokumen dari iframe di Internet Explorer. Dengan cara ini, kita memberikan waktu untuk membangun DOM dan membuatnya tersedia untuk kita.
Dan di sini adalah bagaimana menggunakan plugin ini:
assets/script.js
$(document).ready(function(){
$('#download').click(function(e){
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});
e.preventDefault();
});
$('#downloadPage').click(function(e){
$.generateFile({
filename : 'page.html',
content : $('html').html(),
script : 'download.php'
});
e.preventDefault();
});
});
$('#download').click(function(e){
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});
e.preventDefault();
});
$('#downloadPage').click(function(e){
$.generateFile({
filename : 'page.html',
content : $('html').html(),
script : 'download.php'
});
e.preventDefault();
});
});
Ketika memanggil $. GenerateFile, Anda harus lulus nama file (harus sesuatu yang deskriptif), isi teks, dan jalan menuju download.php. Seperti yang dapat Anda lihat pada contoh di atas, kita bisa menghasilkan berbagai jenis file, asalkan adalah teks.
Dengan plugin yang sederhana ini selesai!
kesimpulan
Anda dapat menggunakan kode ini untuk menambahkan fitur ekspor ke aplikasi web atau meningkatkan area tertentu dari situs Anda dengan fungsi download. Hal ini bahkan mungkin untuk menghasilkan file doc dan spreadsheet jika Anda mengikuti format XML Microsoft Office. Bagian yang terbaik adalah bahwa semuanya dilakukan dengan JavaScript dan Anda dapat dengan mudah menggabungkan berbagai sumber data.
Demo Download
