項(xiàng)目中有個(gè)需求，生成一個(gè)含有大量鏈接的文本文件提供給用戶下載。鏈接格式如下：
類似這種鏈接，最初我們的方案是用php在后臺(tái)生成，提供給用戶下載，但這種方式有兩個(gè)很大的缺點(diǎn):
- 文件體積較大，從服務(wù)端下載增加服務(wù)器壓力，浪費(fèi)帶寬
增加下載時(shí)間 - 因?yàn)槎际俏谋?，所以后來選擇直接在客戶端用js生成文本，再插入到dom中，用戶下載時(shí)就是直接從本地下載。
<!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('數(shù)據(jù)加載完成...');
download(arr,'urls.txt');
}, 0);
</script>
</html>
這樣做不僅減少服務(wù)器壓力，用戶也不需要時(shí)間等待下載，如果是流量上網(wǎng)，還能減少流量使用。
主流的瀏覽器都支持這種方案，當(dāng)然如果使用IE，必須要IE10+。
文章首發(fā)于: https://tech.jbangit.com/create-text-file-using-javacript.html
