js实现文件获取和文件下载

一、文件获取

function addAttachmentBtn() {
	try {
		// 添加一个input用来选择文件
		newNode = '<input type="file" class="choose_file" style="display:none" multiple/>';
		parentElement = document.getElementsByClassName("fv0");
		parentElement[0].innerHTML += newNode;
		let choose_attachment = document.getElementsByClassName("attachment")[0];
		choose_attachment.onclick = function () {
			document.getElementsByClassName("choose_file")[0].click();
		}
	} catch {}
	// 获取选择文件的信息
	document.getElementsByClassName("choose_file")[0].addEventListener('change', function (event) {
		try {
			var fileName = event.target.files[0].name;
			var fileSize = getFileSize(event.target.files[0].size);
			var fileType = event.target.files[0].type;
			addAttachmentImg(fileName, fileSize);
			// 获取文件内容
			var reader = new FileReader();
			var value = attachmentCount;
			reader.onload = function () {
				map.put(value, fileType + "-xxxxxx-" + fileName + "-xxxxxx-" + event.target.files[0].size + "-xxxxxx-" + window.btoa(unescape(encodeURIComponent(this.result))));
			}
			reader.readAsDataURL(event.target.files[0])		
        } catch {}
	})
}

注意：

1、需要用 readAsDataURL 读取文件，以便于下载文件时对各种文件类型的处理。

2、传输文件时，使用如下形式对内容进行编码，使得能够以正确的编码方式获取内容。

function encodeBase64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

function decodeBase63(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

二、文件下载

// 设置附件下载事件
function setDownloadEvent(dom){ 
    //省略事件监听等操作的代码
	downloadAttachment(index);
}

// 用于下载附件
function downloadAttachment(index){
	let file_name = sections[index].split("name=")[1].split("\n")[0];
	var a = window.atob(sections[index].split("\n\n")[1])
	let file_content = decodeURIComponent(escape(window.atob(a)));
	download(file_name,file_content);
}

// 下载附件-IMPLEMENT
function download(filename,text){
	const aTag = document.createElement('a');
	aTag.download = filename;
	aTag.style = "display: none";
	aTag.href = text;
	document.body.appendChild(aTag);
	aTag.click();
} 

三、原理

<a href="data:text/txt;charset=utf-8,测试下载纯文本" download="测试.txt" >下载1</a>
<a href="data:text/txt;charset=utf-8,测试下载纯文本">下载2</a>

- <a> 标签中的 href 属性中的值为 dataURL 类型，因此可以实现下载不同类型的文件

- 上图中的 下载1 可以实现下载，下载2 会在浏览器打开文件内容

参考资料：

1、 JS弹出下载对话框以及实现常见文件类型的下载-好记的博客

2、 js黑魔法之使用atob解码utf-8字符 | levy

还有其他的参考资料，但是我都没保存，抱歉 ...