如何利用前端HTML/JavaScript和后端Node.js + Express把文本压缩成zip功能,下面web建站小编给大家简单介绍一下具体实现代码!
前端代码示例:
<textarea id="htmlText"></textarea>
<button onclick="compressAndDownload()">压缩并下载为ZIP</button>
<script>
async function compressAndDownload() {
const htmlText = document.getElementById('htmlText').value;
if (!htmlText) {
console.log('请输入或粘贴HTML文本');
return;
}
try {
const response = await fetch('/api/compress-html-text', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ htmlText })
});
if (!response.ok) {
throw new Error('Failed to compress HTML text');
}
// 假设服务器返回压缩后ZIP文件的下载URL
const zipUrl = await response.text();
// 打开新的浏览器标签下载生成的ZIP文件
window.open(zipUrl);
} catch (error) {
console.error('Compression error:', error);
console.log('压缩过程中发生错误,请稍后重试');
}
}
</script>
后端代码示例:
const express = require('express'); const archiver = require('archiver'); const fs = require('fs'); const os = require('os'); const app = express(); // 处理HTML文本压缩请求 app.post('/api/compress-html-text', async (req, res) => { try { const { htmlText } = req.body; // 创建临时文件夹存放临时文件 const tempDir = await fs.promises.mkdtemp(os.tmpdir() + '/html-text-'); const htmlFilePath = `${tempDir}/input.html`; // 将HTML文本写入临时文件 await fs.promises.writeFile(htmlFilePath, htmlText); // 创建ZIP文件并添加HTML文件 const output = fs.createWriteStream(`${tempDir}/output.zip`); const archive = archiver('zip', { zlib: { level: 9 } }); // 最高压缩级别 archive.pipe(output); archive.file(htmlFilePath, { name: 'input.html' }); await new Promise((resolve, reject) => { archive.on('finish', resolve); archive.on('error', reject); archive.finalize(); }); // 返回ZIP文件的下载链接 res.send(`/download-zip?path=${encodeURIComponent(tempDir)}`); } catch (error) { console.error('Compression error:', error); res.status(500).send('Internal server error'); } }); // 提供ZIP文件下载路由 app.get('/download-zip', (req, res) => { const tempDir = req.query.path; res.download(`${tempDir}/output.zip`, 'compressed_html.zip', err => { if (err) { console.error('Download error:', err); } else { // 下载完成后清理临时文件夹 fs.rm(tempDir, { recursive: true }, err => { if (err) { console.error('Failed to clean up temporary directory:', err); } }); } }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); });