前端-文件的上传与下载专题这篇文章总结前端实现各类文件（如 pdf,word,excel,img）上传下载的方法，供参考

概要

这篇文章总结前端实现各类文件（如 pdf,word,excel,img）上传下载的方法，供参考。

PDF的预览
PDF的下载
图片的预览
图片的下载
接收arraybuffer类型数据并处理

需要知道的MIME类型

pdf文件：application/pdf
png图片：image/png
jpg图片：image/jpeg
gif图片：image/gif
js文件：text/javascript
html文件：text/html
xlsx表格：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
pptx格式ppt文件：application/vnd.openxmlformats-officedocument.presentationml.presentation
txt格式文件：text/plain
xml文件：text/xml
doc格式：application/msword
docx格式：application/vnd.openxmlformats-officedocument.wordprocessingml.document
xls格式：application/vnd.ms-excel
ppt格式：application/vnd.ms-powerpoint

1 PDF的预览

原理
- 第一步：获取Blob对象格式的pdf文件或者是File对象格式的pdf文件。（File接口继承自Blob接口）
- 第二步：调用URL.createObjectURL()方法，生成一个DOMString
- 第三步：将该DOMString赋值给一个iframe的src属性，该iframe会作为容器展示pdf的内容。
疑问1 如何获取Blob对象、File对象格式的pdf文件
- 方案1：类型为file的input元素，选择文件后会返回一个FileList对象，它是File对象的集合
场景1.1：选取本地的pdf文件并实现预览

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			iframe{
				margin-top: 50px;
				margin-left: 13px;
			}
			input{
				position: fixed;
				top: 20px;
				left: 20px;
			}
		</style>
	</head>
	<body>
		<input type="file" id="input" multiple>
		<iframe id="inlineFrameExample"
		    title="Inline Frame Example"
		    width="300"
		    height="200"
		    src="">
		</iframe>
	</body>
	<script>
		const inputElement = document.getElementById("input");
		
		inputElement.addEventListener("change", handleFiles, false);
		
		function handleFiles() {
		  const fileList = this.files; /* now you can work with the file list */
		  for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
			// 这里的file即是File对象，可以直接传入URL.createObjectURL方法中并生成一个DOMString
		    const file = fileList[i];
			// obj_url是一个DOMString
			const obj_url = URL.createObjectURL(file);
			const iframe = document.getElementById('inlineFrameExample');
			iframe.setAttribute('src', obj_url);
			// DOMString的生命周期默认是在网页被关闭时结束，如果明确知道用不到该DOMString了，可以手动释放，减少浏览器的内存使用
			URL.revokeObjectURL(obj_url);
		  }
		}
	</script>
</html>

场景1.1 展示效果如下图：

场景1.2：接受后端返回的pdf文件并实现预览，注意，这里后端返回的是字节流。至于Content-Type经过测试，application/json和application/pdf都可行，注意：这里是通过原生的ajax请求，并且指定responseType为blob

// 下载pdf文件
async downolad(urlparams){
    // 这里的url是请求地址，另包含一个参数，该参数需要用base64编码后发到后端
	let url = this.$ajaxUrl.content.space_downloadFile;
	let base64url = window.btoa(encodeURIComponent(urlparams));
	
	let xhr = new XMLHttpRequest();
	let path = '';
	xhr.open("get", '/space' + url + '?fileOutPath=' + base64url);
	xhr.responseType = "blob";
	xhr.onload = function() { 
	    path = URL.createObjectURL(xhr.response);
	    const iframe = document.getElementById('inlineFrameExample');
	    iframe.setAttribute('src', path);
	};
	
	xhr.send();
	
}

场景1.2展示效果如下图：

场景1.3：后端返回一个存在于阿里或者其他对象存储服务网站的固定地址，如http://doc.xueqiu.com/1415d8a96191603fecf628c4.pdf，这时如果在浏览器中直接打开这个地址或者是赋值给a标签的src属性，效果会是在浏览器中新打开一个窗口并预览（如谷歌浏览器中会加载谷歌的pdf阅读插件），此时如果想要实现在网页中局部预览，可以使用和场景2相同的代码。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			iframe{
				margin-top: 20px;
				margin-left: 16px;
			}
			input{
				width:98px;
				height:36px;
				background:rgba(51,153,255,1);
				border-radius:18px;
				font-size: 16px;
				color: #fff;
				line-height: 36px;
				text-align: center;
				outline: none;
				border: none;
				position: absolute;
				top: 27px;
				left: 340px;
			}
			input:hover{
				background:rgba(33,129,225,1);
			}
		</style>
	</head>
	<body>
		<iframe id="inlineFrameExample"
		    title="Inline Frame Example"
		    width="300"
		    height="200"
		    src="">
		</iframe>
		<input type="submit">
	</body>
	<script type="text/javascript">
		let url = 'http://doc.xueqiu.com/1415d8a96191603fecf628c4.pdf';
		let input = document.querySelector('input');
		
		let xhr = new XMLHttpRequest();
		let path = '';
		xhr.open("get", url);
		xhr.responseType = "blob";
		xhr.onload = function() { 
			path = URL.createObjectURL(xhr.response);
			const iframe = document.getElementById('inlineFrameExample');
			iframe.setAttribute('src', path);
		};
		
		input.addEventListener('click', () => {
			xhr.send();
		})
	</script>
</html>

场景1.3展示效果如下图：

2 PDF的下载

原理：和pdf的预览几乎一样，只是在第三步时，不再把URL.createObjectURL()方法生成的DOMString赋值给iframe标签的src属性，而是新创建一个a标签，并把它赋值给a标签的src属性，然后模拟点击a标签，实现下载，下载完成后再移除a标签。
Note：下载的场景和预览的场景完全一致，除了使用a标签来模拟下载的部分代码不一致
场景2.1：从网络上获取pdf文件并下载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				width:98px;
				height:36px;
				background:rgba(51,153,255,1);
				border-radius:18px;
				font-size: 16px;
				color: #fff;
				line-height: 36px;
				text-align: center;
				outline: none;
				border: none;
				position: absolute;
				top: 27px;
				left: 40px;
			}
			input:hover{
				background:rgba(33,129,225,1);
			}
		</style>
	</head>
	<body>
		<input type="submit" value="下载"></input>
	</body>
	<script type="text/javascript">
		let url = 'http://doc.xueqiu.com/1415d8a96191603fecf628c4.pdf';
		let input = document.querySelector('input');
		
		let xhr = new XMLHttpRequest();
		let path = '';
		xhr.open("get", url);
		xhr.responseType = "blob";
		xhr.onload = function() { 
			path = URL.createObjectURL(xhr.response);
			const a = document.createElement('a');
			a.setAttribute('download', '监测报告');
			a.setAttribute('href', path);
			a.click();
		};
		
		input.addEventListener('click', () => {
			xhr.send();
		})
	</script>
</html>

场景2.1 展示效果如下图

3 图片的预览

原理：图片展示最典型的方式是给img标签设置src属性，src可能指向项目中的一张静态图片，也可能指向公网上的某个图片地址。那么，对于本地系统上传的图片，如何实现预览呢？
- 第一步：从type为file的input元素上获取File对象
- 第二步：使用FileReader对象读取该File对象，并在读取完成后把生成的类型为Data:URL格式的URL赋值给img标签。另一种方式则与上面的pdf预览下载的方式类似，使用URL.createObjectURL()方法处理取到的Blob对象，并把结果赋值给img标签的src属性
场景3.1：使用FileReader对象实现本地上传的图片预览

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input{
	margin-bottom: 10px;
}
.imgCom{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.imgCom > img{
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
    <input type="file" id= "file" />
    <div class="imgCom" id= "imgCom" style="width" > </div>
<script>
    let eleFile = document.querySelector('#file');
    function preview(file) {
		// 创建FileReader对象
        let reader = new FileReader();
        reader.onload = function (e) {
			// e.target.result，这里的e.target.result是一个
			// data:URL格式的字符串（base64编码），它表示所读取文件的内容
			// e.target.result形式类似于：data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3
			// 英文符号,(逗号)后面的表示的就是经过Base64编码后的图片内容
            document.getElementById('imgCom').innerHTML = '<img src="' + e.target.result + '">'
        }
        reader.readAsDataURL(file)
    }
 
    eleFile.addEventListener('change', function (e) {
        let file = e.target.files[0],
        reg = /\.(png|jpg|gif|bmp)$/;
        if (reg.test(file.name)) {
            preview(file)
        } else {
            alert('选择正确格式的图片');
        }
    });
</script>
</body>
</html>

场景3.1：效果如下图

场景3.2：使用URL.createObjectURL()方法实现本地上传图片的预览

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input{
	margin-bottom: 10px;
}
.imgCom{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.imgCom > img{
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
    <input type="file" id= "file" />
    <div class="imgCom" id= "imgCom" style="width" > </div>
<script>
    let eleFile = document.querySelector('#file');
    function preview(file) {
        // obj_url是一个DOMString
        const obj_url = URL.createObjectURL(file);
        document.getElementById('imgCom').innerHTML = '<img src="' + obj_url + '">'
    }
 
    eleFile.addEventListener('change', function (e) {
        let file = e.target.files[0],
        reg = /\.(png|jpg|gif|bmp)$/;
        if (reg.test(file.name)) {
            preview(file)
        } else {
            alert('选择正确格式的图片');
        }
    });
</script>
</body>
</html>

场景3.2：效果如下图

4 图片的下载

原理：图片下载完全可以采用和上面pdf下载一样的方式，代码甚至都一模一样，这里就不展示代码了。除了这种方式，当然也可以使用其他方式下载图片，只是这种方式兼容性较好并且几乎支持所有图片。
场景4.1：下载网络上的图片（代码和下载pdf的一模一样，只是换了资源链接地址）
场景4.1效果：如下图

5 接收arraybuffer类型数据并处理

原理：XMLHttpRequest level2提供了上传和下载二进制数据的能力，这也使得接收后端的二进制数据并转换为前端所需要格式成为可能。接收来自后端的二进制数据时，除了blob类型，arraybuffer类型也是可以的。
原理：默认情况下，ajax请求返回的数据类型是文本，如果想要后端返回arraybuffer类型数据，需要通过responseType字段来指定。
responseType类型列举：
- ""：responseType为空字符串时，采用默认类型DOMString(即字符串)，与responseType值为"text"时相同。
- arraybuffer：一个包含二进制数据的Javascript ArrayBuffer类型数据
- blob：一个包含二进制数据的Javascript Blob对象
- text：和空字符串时意义相同，都表示文本数据
- document：html或xml格式数据
如何使用：

// 现在的场景是从后端获取图片数据并展示在页面的img标签，后端返回的是二进制数据

const xhr = new XMLHttpRequest();

xhr.open("GET", '/path/test.php');

xhr.responseType = 'arraybuffer';

xhr.onload = (e) => {
    const bytes = new Unit8Array(xhr.rsponse);
    let binary = '';
    
    for (let i = 0;  i < bytes.length; i++){
        binary += String.fromCharCode(bytes[i]);
    }
    
    const src = window.btoa(binary);
    
    document.getElementById('image').src = `data:image/jpeg;base64,${src}`;
}

xhr.send();

前端-文件的上传与下载专题

概要

相关的概念与API

需要知道的MIME类型

1 PDF的预览

2 PDF的下载

3 图片的预览

4 图片的下载

5 接收arraybuffer类型数据并处理