Salam, kawan. Cantik di server tempur saya
Teman-teman meminta saya untuk menyiapkan lahan pengembangan untuk mereka, dan alih-alih menyeret templat spesifik saya kepada mereka, saya teringat sebuah proyek yang menarik
Tentu saja, sebelum menggali sumbernya, saya melihat di mana Chrome menarik arsip zip yang dihasilkan dengan konfigurasi, dan di sana alamat yang dimulai dengan "gumpalan:" menunggu saya, ups. Sudah menjadi jelas bahwa layanan ini tidak menghasilkan apa pun selama prosesnya, pada kenyataannya, semuanya dilakukan oleh js. Memang arsip zip dihasilkan oleh klien, browser, dan javascript itu sendiri. Itu. keindahannya adalah proyek itu
Setelah membagi proyek, saya mulai memikirkan apa saja pilihan saya. Tugas ini diperumit oleh kenyataan bahwa saya tidak ingin menyimpang dari ketentuan bahwa proyek harus tetap murni front-end, tanpa back-end. Tentu saja, solusi paling sederhana adalah dengan menarik nodejs dan memaksanya membuat arsip dengan konfigurasi menggunakan tautan langsung.
Sebenarnya tidak banyak pilihan. Lebih tepatnya, hanya satu yang terlintas dalam pikiran. Kita perlu menyiapkan konfigurasi dan mendapatkan tautan yang dapat kita salin ke konsol server untuk mendapatkan arsip zip.
Beberapa file teks dalam arsip zip yang dihasilkan cukup berat, hanya beberapa kilobyte. Solusi yang jelas adalah mendapatkan string base64 dari arsip zip yang dihasilkan dan membuangnya ke buffer, saat berada di server dengan perintah di konsol
echo 'base64string' | base64 --decode > config.zip
kita bisa membuat file zip yang sama.
Dalam sumber daya proyek kita melihat metode untuk menghasilkan arsip zip:
$scope.downloadZip = function() {
var zip = new JSZip();
var sourceCodes = $window.document.querySelectorAll('main .file .code.source');
for (var i = 0; i < sourceCodes.length; i++) {
var sourceCode = sourceCodes[i];
var name = sourceCode.dataset.filename;
var content = sourceCode.children[0].children[0].innerText;
if (!$scope.isSymlink() && name.match(/^sites-available//)) {
name = name.replace(/^sites-available//, 'sites-enabled/');
}
zip.file(name, content);
if (name.match(/^sites-available//)) {
zip.file(name.replace(/^sites-available//, 'sites-enabled/'), '../' + name, {
unixPermissions: parseInt('120755', 8),
});
}
}
zip.generateAsync({
type: 'blob',
platform: 'UNIX',
}).then(function(content) {
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
});
gtag('event', $scope.getDomains().join(','), {
event_category: 'download_zip',
});
};
semuanya cukup sederhana, menggunakan perpustakaan
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
di mana konten adalah objek gumpalan yang dihasilkan dari arsip zip.
Oke, yang harus saya lakukan hanyalah menambahkan tombol lain di sebelahnya dan ketika saya mengkliknya, saya tidak akan menyimpan arsip zip yang dihasilkan ke browser, tetapi mendapatkan kode base64 darinya. Setelah mengutak-atik sedikit, saya mendapatkan 2 metode, bukan hanya satu downloadZip:
$scope.downloadZip = function() {
generateZip(function (content) {
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
});
gtag('event', $scope.getDomains().join(','), {
event_category: 'download_zip',
});
};
$scope.downloadBase64 = function() {
generateZip(function (content) {
var reader = new FileReader();
reader.readAsDataURL(content);
reader.onloadend = function() {
var base64 = reader.result.replace(/^data:.+;base64,/, '');
// Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ base64 ΠΊΠ°ΠΊ ΡΠ°Π· Π½ΡΠΆΠ½ΡΠΉ ΠΌΠ½Π΅ zip Π°ΡΡ
ΠΈΠ² Π² Π²ΠΈΠ΄Π΅ base64 ΡΡΡΠΎΠΊΠΈ
}
});
gtag('event', $scope.getDomains().join(','), {
event_category: 'download_base64',
});
};
Seperti yang mungkin Anda ketahui, saya memindahkan pembuatan arsip zip itu sendiri ke metode generateZip pribadi, dan seterusnya. Ini adalah AngularJS, dan penulisnya sendiri tetap menggunakan callback dan tidak mengimplementasikannya melalui janji. downloadZip masih melakukan saveAs sebagai output, sementara downloadBase64 melakukan sesuatu yang sedikit berbeda. Kami membuat objek FileReader yang datang kepada kami dalam html5 dan sudah cukup
position: absolute;
z-index: -1;
opacity: 0;
yang memungkinkan saya menyembunyikan elemen dari tampilan dan membiarkannya di halaman. Voila, tugas selesai, ketika saya mengklik tombol saya, baris seperti ini ditempatkan di buffer:
echo 'base64string' | base64 --decode > config.zip
yang baru saja saya tempelkan ke konsol di server dan segera menerima arsip zip dengan semua konfigurasinya.
Dan tentu saja saya mengirimkan pull request kepada penulisnya, karena... proyeknya aktif dan hidup, saya ingin melihat pembaruan dari penulis dan memiliki tombol sendiri) Bagi yang berminat, ini dia
Selamat berkembang semuanya)
Sumber: www.habr.com