原生js实现文件下载

王新焱

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

阅读量5.7k

点赞数 3

CC 4.0 BY-SA版权

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

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

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

本文介绍了在Vue.js项目中进行文件下载的两种方法：一是通过网络文件下载，利用XMLHttpRequest获取Blob对象并创建下载链接；二是针对本地文件，通过canvas处理图片并生成dataURL进行下载。同时提供了代码示例和在线体验链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件下载是前端开发常见的开发需求，本文以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()
}