typescript:一个关于导出excel的简单例子

前序

导出excel的方法简单来说有两部思路,一个是‘excel格式’是什么格式,一个是怎么下载,后者比较简单,基本实现都是以一个a标签,设置link元素下载,问题在于前者,对于excel的格式了解比较少的时候,会比较难下手,以及再ie等其他版本的浏览器导出的时候,需要考虑什么因素?
下面还是举一个简单点的例子(比较普遍的现象)

导出一个excel文件

核心在于导出流的时候的文件格式,一般选用的是csv格式,部分时候也有用table等html来假冒excel,但是试过会有错误提示,所以不考虑,而a标签的我们以blob的格式来嵌入,而各个元素之间的,则以‘,’还有’\n’来隔开,所以大概的逻辑就是

 // 以blob流的形式,组合成csv格式导出
    public createLargerCsv(titleArray: Array<String>, jsonData: Array<any>) {
      let str: string = ''
      let blob: Blob
      this.startTime = new Date()
      
      // 使用string是因为如果是0的话会不显示,
      titleArray.forEach(title => {
        str += `${title.toString()},`
      })
      str += '\n'
      
      jsonData.forEach(data => {
        Object.values(data).forEach(o => {
          str += `${o.toString()},`
        })
        str += '\n'
      })
      
      // 添加编码格式
      blob = new Blob([str], { type: 'text/plain;charset=utf-8' })

      //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
      this.createLink(this.fileName, window.URL.createObjectURL(blob), FileType.csv)
      this.endTime = new Date()
      // 返回开始,结束时间
      return {
        endTime: this.endTime,
        startTime: this.startTime
      }
    }

 // 创建一条a标签的链接
    private createLink(fileName: String, linkUrl: string, fileExtension: FileType) {
      let aTag = document.createElement('a')
      aTag.download = `${fileName}.${fileExtension}`
      document.body.appendChild(aTag)
      aTag.href = linkUrl
      aTag.click()
      document.body.removeChild(aTag)
    }

注意,这只是考虑一种大体的情况,具体情况还要很多完善,只是大概让大家知道原理的实现

用法

import { AEXECEL } from { aexece }
var myExecel = new AEXECEL.AExecel('fileName');
const title = ['标题1', '标题2', '标题3', '标题4']
let data = new Array(1000000);
data.fill({ 'name1': 'value1', 'name2': 'value2', 'name3': 'value3', 'name4': 'value4' })
myExecel.createLargerCsv(title, data)

链接: js实现文件导出为excel
npm: aexecel
github:aexecel

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值