前端下载数据到客户端的几种方式

发布时间:2023年12月18日

前端下载数据

建议用方式1

方式一

	//新的方式下载csv文件
	//创建Blob对象,是一种用于存储二进制数据的对象
	var BOM = '\uFEFF'
	const blob = new Blob([BOM + result] , { type: 'text/csv'})
	//const blob = new Blob([res], { type: 'application/zip' });
	//这段代码用于创建一个临时的URL,该URL指向Blob对象。
	const url = window.URL.createObjectURL(blob)
	//创建一个链接到Blob对象的<a>元素
	const link = document.createElement('a')
	//href属性用于设置链接的目标地址,download属性用于设置链接的下载名称
	link.href = url
	link.setAttribute('download',fileName)
	//link.setAttribute('download', 'ParseArxml_'+this.getCurrentDate()+'.zip');
	document.body.appendChild(link)
	link.click()
	window.URL.revokeObjectURL(url)
	document.body.removeChild(link)

方式二

if (
     (navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) ||
     navigator.userAgent.indexOf('Edge') > -1
   ) {
     //IE10或Edge浏览器
     var BOM = '\uFEFF'
     var csvData = new Blob([BOM + result], { type: 'text/csv' })
     navigator.msSaveBlob(csvData, fileName)
   } else {
     //非IE浏览器
     var csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
     //使用a标签的download属性实现下载功能
     var link = document.createElement('a')
     link.href = encodeURI(csvContent)
     link.download = fileName
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
   }
文章来源:https://blog.csdn.net/weixin_45031570/article/details/135056473
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。