项目中有个需求，生成一个含有大量链接的文本文件提供给用户下载。链接格式如下：
类似这种链接，最初我们的方案是用php在后台生成，提供给用户下载，但这种方式有两个很大的缺点:
- 文件体积较大，从服务端下载增加服务器压力，浪费带宽
增加下载时间 - 因为都是文本，所以后来选择直接在客户端用js生成文本，再插入到dom中，用户下载时就是直接从本地下载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>vue-app</title>
</head>
<body>
<div>
<a id="a" href="">
<button>Download file</button>
</a>
</div>
</body>
<script>
const a = document.getElementById('a');
function download(data, name) {
const file = new Blob(data, {type: 'text/plain'});
a.href = URL.createObjectURL(file);
a.download = name;
}
setTimeout(() => {
const arr = [];
for (let i=0;i<80000;i++) {
arr.push(`http://wiyi.org/productid=${i + 1}\n`);
}
alert('数据加载完成...');
download(arr,'urls.txt');
}, 0);
</script>
</html>
这样做不仅减少服务器压力，用户也不需要时间等待下载，如果是流量上网，还能减少流量使用。
主流的浏览器都支持这种方案，当然如果使用IE，必须要IE10+。
文章首发于: https://tech.jbangit.com/create-text-file-using-javacript.html
网友评论