问候,同志们。 在我的战斗服务器上很漂亮
朋友们让我为他们建立一个开发农场,我没有把我的特定模板拖给他们,而是想起了一个有趣的项目
当然,在深入研究源代码之前,我查看了 Chrome 在哪里使用配置提取生成的 zip 存档,并且有一个以“blob:”开头的地址在等着我,哎呀。 已经很清楚了,服务一路上并没有生成任何东西,事实上,这一切都是由 js 完成的。 事实上,zip 存档是由客户端、浏览器和 javascript 本身生成的。 那些。 美妙之处在于该项目
分叉该项目后,我开始思考我的选择是什么。 这项任务很复杂,因为我不想偏离该项目应该保持纯前端、没有任何后端的条件。 当然,最简单的解决方案是拉起 NodeJS 并强制它使用直接链接生成带有配置的存档。
事实上,没有太多选择。 更准确地说,我只想到一个。 我们需要设置配置并获取一个链接,我们可以将其复制到服务器控制台以获取 zip 存档。
生成的 zip 存档中的几个文本文件相当重,实际上有几千字节。 显而易见的解决方案是从生成的 zip 存档中获取 base64 字符串并将其放入缓冲区,同时在服务器上使用控制台中的命令
echo 'base64string' | base64 --decode > config.zip
我们可以创建同样的 zip 文件。
在项目资源中我们看到了生成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',
});
};
一切都很简单,使用库
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
其中 content 是 zip 存档的结果 blob 对象。
好吧,我所要做的就是在它旁边添加另一个按钮,当我单击它时,我不会将生成的 zip 存档保存到浏览器,而是从中获取 base64 代码。 经过一番摆弄后,我得到了 2 个方法,而不仅仅是一个 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',
});
};
您可能已经注意到,我将 zip 存档本身的生成移至私有的generateZip 方法,等等。 这就是AngularJS,作者本人坚持回调,并没有通过promise来实现。 downloadZip 仍然将 saveAs 作为输出,而 downloadBase64 的做法略有不同。 我们创建了一个 FileReader 对象,它是在 html5 中出现的,并且已经相当好了
position: absolute;
z-index: -1;
opacity: 0;
这使我既可以从视图中隐藏元素,又可以将其实际保留在页面上。 瞧,任务完成了,当我单击按钮时,缓冲区中放置了这样一行:
echo 'base64string' | base64 --decode > config.zip
我只是将其粘贴到服务器上的控制台中,并立即收到包含所有配置的 zip 存档。
当然,我向作者发送了拉取请求,因为...... 该项目非常活跃,我希望看到作者的更新并拥有自己的按钮)对于那些感兴趣的人,这里是
祝大家发展愉快)
来源: habr.com