VUE导出数据为txt或csv文件

最新推荐文章于 2024-05-08 01:30:36 发布

小黄人软件

最新推荐文章于 2024-05-08 01:30:36 发布

阅读量2.2k

点赞数 4

本文链接：https://blog.csdn.net/chenhao0568/article/details/111038646

版权

效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
	<button size="small" @click="ExportData('hello.txt',message)" type="primary" style="margin:0px 10px 0px 0px">导出</button>
	</div>


	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue! 123',
			name : "Vue"
		},
		methods:{
		  		ExportData(filename,filecontent){
			  	//定义文件内容，类型必须为Blob 否则createObjectURL会报错
			  	let content = new Blob([filecontent])	 
			  	//生成url对象
			  	let  urlObject = window.URL || window.webkitURL || window	
			  	let url = urlObject.createObjectURL(content)	
			  	//生成<a></a>DOM元素
			  	let el = document.createElement('a')
			  	//链接赋值
			  	el.href = url
			  	el.download =filename
			  	//必须点击否则不会下载
			  	el.click()		
			  	//移除链接释放资源		
			    urlObject.revokeObjectURL(url)
			  }
		}
	});
	</script>

</body>
</html>

csv示例

棚,棚id,智能设备Id,传感器id,传感器名,值,采集时间
1,2,3,4,5,6,7

小黄人软件

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
VUE导出数据为txt或csv文件

效果<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body> <div id="app"> <button s
复制链接

扫一扫