前端导出（JSON\数据流）

一、以excel的格式导出JSON数据

const timestamp2string = (timestamp) => {const now = new Date(timestamp)const Y = now.getFullYear().toString()const M = (now.getMonth() + 1).toString()const D = now.getDate().toString().length === 1? '0' + now.getDate() : now.getDate()const h = now.getHours().toString()const m = now.getMinutes().toString()const s = now.getSeconds().toString()return {Y,M,D,h,m,s,all: Y + M + D + h + m + s,str: Y + '年' + M + '月' + D + '日' + ' ' + h + ':' + m + ':' + s}
}
// 要导出的数组
const list = [{exceptionId: '123',stationName: '车间1',deviceCode: 'D1',warnTime: 1664419522806,warnEndTime: 1667184327450,recorder: '提交人',warnDesc: '坏了',warnReason: '突然坏了',warnCode: 'Code1',shortTermTreatment: '等等看',longTermTreatment: '卖废品'}
]
if (!list.length) {console.error('无导出数据')return
}
const tableHead = {exceptionId: '故障ID',stationName: '车间名称',deviceCode: '设备编号',warnTime: '故障发生时间',warnEndTime: '故障结束时间',recorder: '提交人',warnDesc: '故障描述',warnReason: '故障原因',warnCode: '故障代码',shortTermTreatment: '短期处理方式',longTermTreatment: '长期处理方式'
}
let str = ''
/*** 每行数据用\n换行* 每个单元格用,分隔* 表格内容每个单元格最后加\t，避免出现科学计数法等格式* 最后用encodeURIComponent防止中文乱码*/
// 表头
for(let key in list[0]) {str += `${tableHead[key]},`
}
str = str.slice(0, -1) + '\n'
// 表格内容
for(let i = 0; i < list.length; i++) {for(let key in list[i]) {if (key === 'warnTime' || key === 'warnEndTime') {str += `${timestamp2string(list[i][key]).str + '\t'},`} else {str += `${list[i][key] + '\t'},`}}str += '\n'
}
const uri = 'data:text/xlsx;charset=utf-8,\ufeff' + encodeURIComponent(str);
const link = document.createElement("a")
link.href = uri
const now = timestamp2string(Date.now())
link.download =  `故障记录${now.all}.xlsx`
link.click()

二、数据流通过blob导出(不限文件类型)

请求接口responseType:’blob’，接口返回二进制流
IE10提供window.navigator.msSaveBlob和msSaveOrOpenBlob方法可以直接保存到本地，接收参数(new Blob(data)，’带后缀文件名’)
其他浏览器：
1. 生成Blob对象，new Blob(array, options)
2. 生成对象URL，指向附件地址，createObjectURL(blob)
3. 创建<a>标签，href属性为对象URL，download属性为带后缀文件名，display:none
4. append到body里面，a.click()触发事件，删除节点
5. 释放对象URL，revokeObjectURL

前端导出（JSON\数据流）相关推荐

AE导出JSON数据用CSS做前端交互---kalrry
AE导出JSON数据用CSS做前端交互---kalrry 一.简介二.准备三.例子四.参考一.简介关于网页端动画实现 web端做动画有多种形式,可以用CSS的animation,也可以用Ca ...
vue后端返回数据流前端导出下载xls文件
后端返回数据流, 前端导出下载xls文件 export function exportMethod() {axios({method:'get',url: url+'params',responseT ...
纯前端js直接导入导出json文件
现在很多公司都有多个测试环境或者其他环境,有些配置信息在其他环境需要同样的信息,按照传统只能修改数据库对于新手小白来说只能求助于服务端了,现在前端也可以直接将当前的数据导出为json文件,然后在需要的 ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
uniapp 前端导出excel
需求:app前端导出excel,不需要后台参与方案1:用付费插件(Android读取excel或导出数据到Excel表 - DCloud 插件市场)实操确实可以用,可以设置各种属性,比较齐全方案2 ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
xlsx模块前端_利用xlsx-syle前端导出excel且支持自定义样式
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的. 本文仅用于记录我在前端导出excel遇到的问题的笔记整理. 需求描述需要前端来实现对数据的导出,导出成 ...
vue中导出json数据为excel表格并保存到本地
继我上次成功利用vue和elemen把excel的数据导入至前端vue,因为excel表中的数据有些必填项没有填写或者填写错误(比如写错字)所以就要将没有成功导入的数据导出成一份excel表并保存至本 ...

前端导出（JSON\数据流）

前端导出（JSON\数据流）相关推荐

最新文章

热门文章