原生js实现文件下载

王新焱

已于 2023-07-19 17:06:33 修改

阅读量4.5k

点赞数 3

文章标签： javascript 前端开发语言

于 2023-05-22 10:40:52 首次发布

本文链接：https://blog.csdn.net/qq_34402069/article/details/130772375

版权

文件下载是前端开发常见的开发需求，本文以vue框架为例介绍两种下载方式，网络文件下载和本地文件下载，具体实现如下，如需体验，可点击底部demo链接。

一、网络文件下载

<div @click="clickBtn">文件下载</div>

methods: {
   clickBtn() {
		this.fileDownload(url, filename) // 传入文件url和文件名称
	},
	// 文件下载函数
	fileDownload(url, filename) {
		function getBlob(url, cb) {
			var xhr = new XMLHttpRequest();
			xhr.open('GET', url, true);
			xhr.responseType = 'blob';
			xhr.onload = function () {
				if (xhr.status === 200) {
					cb(xhr.response);
				}
			};
			xhr.send();
		}
		function saveAs(blob, filename) {
			if (window.navigator.msSaveOrOpenBlob) {
				navigator.msSaveBlob(blob, filename);
				return
			}
			var link = document.createElement('a');
			var body = document.querySelector('body');
			link.href = window.URL.createObjectURL(blob);
			link.download = filename;
			link.style.display = 'none';
			body.appendChild(link);
			link.click();
			body.removeChild(link);
			window.URL.revokeObjectURL(link.href);
		}
		getBlob(url, function (blob) {
			saveAs(blob, filename);
		})
	}
}

示例

二、本地文件下载

<div @click="clickBtn">文件下载</div>


clickBtn() {
    // 01.jpg文件存放在public目录下
	this.fileDownload('./01.jpg', 'filename')
},
fileDownload(link, fileName) {
	let img = new Image()
	img.setAttribute('crossOrigin', 'Anonymous')
	img.onload = function(){
		let canvas = document.createElement('canvas')
		let context = canvas.getContext('2d')
		canvas.width = img.width
		canvas.height = img.height
		context.drawImage(img, 0, 0, img.width, img.height)
		let url = canvas.toDataURL('images/png')
		let a = document.createElement('a')
		let event = new MouseEvent('click')
		a.download = fileName || 'default.png'
		a.href = url
		a.dispatchEvent(event)
	}
	img.src = link + '?v=' + Date.now()
}