Vue 项目开发将数据下载到本地的方法

需求

Vue 项目开发时，要求不调用接口下载，而是主动将接口多次调用产生的接口返回值讲过保存保存到本地

分析

需要使用浏览器的File API，本地存储多次接口返回的数据，在这里我使用的Vuex状态管理去存储调用，实现vue组件之间的通信，然后使用如下代码作为下载的方法

handleDownload(){
      const filecontent = this.dataSourceC;
      const filename = '航线结果规划.csv';
      //定义文件内容，类型必须为Blob 否则createObjectURL会报错
      let content = new Blob([filecontent])	 
      //生成url对象
      let  urlObject = window.URL || window.webkitURL || window	
      let url = urlObject.createObjectURL(content)	
      //生成DOM元素
      let el = document.createElement('a')
      //链接赋值
      el.href = url
      el.download =filename
      //必须点击否则不会下载
      el.click()		
      //移除链接释放资源	
      urlObject.revokeObjectURL(url)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

扩展链接：写一个方法实现数组元素每两个元素加一个换行，并进行文件导出