Vue实现 下载本地Excel文件

1.首先在src下创建 static ( 文件夹名称不可修改 ) 文件夹

Vue实现 下载本地Excel文件_第1张图片

2.在将下载的excel文件放入static文件夹中

Vue实现 下载本地Excel文件_第2张图片

3.给按钮绑定事件,并创建元素用于下载excel文件

Vue实现 下载本地Excel文件_第3张图片 代码如下:

downExcel() {
	let a = document.createElement('a') // 创建a标签
	a.href = '../../static/locationTemplate.xlsx' // 文件路径
	a.download = 'locationTemplate.xlsx' // 文件名称
	a.style.display = 'none' // 隐藏a标签
	document.body.appendChild(a)
    // 定时器(可选)
	setTimeout(() => {
	a.click() // 模拟点击(要加)
	document.removeChild(a) //删除元素(要加)
	setTimeout(() => {
		self.URL.revokeObjectURL(a.href) // 用来释放文件路径(可选)
	}, 200)
	    }, 66)
	}

备注:有时下载会现实“找不到文件” , 表示文件路径不对 重新输入文件文件即可

你可能感兴趣的:(vue项目,javascript,vue.js)