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)
}

你可能感兴趣的:(JS解决方案,vue.js,javascript,前端)