公告:極客時間特別贊助199元禮包:技術專欄專享優惠,以及硅谷&BAT等100+公司的架構演進技術大會實錄觀看權限>>>

前端js導出excel方法分享

3086次瀏覽

前言

之前寫個js導出excel的方法,但是發現已經過時了,最近用了一下新的導出方式,可以用,現在分享一下。vue,react都可以用。原理就是通過table導出excel

方法一:

通過csv的方式導出

exportExcel() { // 前端導出excel
  const types = { 'DYNAMIC': '動態創意', 'STATIC': '靜態創意', 'VIDEO': '視頻創意', 'MATERIAL': '素材創意' }
  let currentGroup = ''
  let exportData = this.showList.map(item => {
    if (item.currentGroup) {
      currentGroup = item.currentGroup
    }
    return {
      creativeId: item.creativeId,
      creativeName: item.creativeName,
      description: item.description&& item.description.replace(/[\n\t\r,]/g,";"),// 把里面的回車和中文逗號換成分號
      creativeSize: `${item.creativeWidth}*${item.creativeHeight}`,
      creativeTime: this.getTime(item.startDate) + ' - ' + this.getTime(item.endDate),
      creativesourceTyle: this.showType(item.creativeSource),
      creativeTypename: types[item.creativeType]
    }
  })
  // console.log(exportData)
  let str = '創意ID,創意名稱,創意描述,創意尺寸,創意時間,創意來源,創意類型\n'
  for (let i = 0; i < exportData.length; i++) {
    for (let item in exportData[i]) {
      str += `${exportData[i][item] + '\t'},`
    }
    str += '\n'
  }
  // encodeURIComponent解決中文亂碼
  let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
  // 通過創建a標簽實現
  var link = document.createElement('a')
  link.href = uri
  // 對下載的文件命名
  let nowTime = `${new Date().getFullYear()}${(new Date().getMonth() + 1)}${new Date().getDate()}`
  link.download = `${currentGroup}-${nowTime}.csv`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
},

注:getTime()和showType()都是轉換函數,和主流程不搭噶。showList是數組,就是要導出的字段,可以針對導出的字段做過濾

另外需要注意的是,字段里面不能有中文逗號,換行等,可以用replace去除掉

方法二:

base64(s) { return window.btoa(unescape(encodeURIComponent(s))) },
exportExcel() { // 前端導出excel
  console.log(this.showList)
  let str = '<tr><td>代理名稱</td><td>allianceid</td><td>attachmentFileId</td>'
  for (let i = 0; i < this.showList.length; i++) {
    str += '<tr>'
    for (let item in this.showList[i]) {
      // 增加\t為了不讓表格顯示科學計數法或者其他格式
      str += `<td>${this.showList[i][item] + '\t'}</td>`
    }
    str += '</tr>'
  }
  let worksheet = 'Sheet1'
  let uri = 'data:application/vnd.ms-excel;base64,'
  // 下載的表格模板數據
  let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
  xmlns:x="urn:schemas-microsoft-com:office:excel" 
  xmlns="http://www.w3.org/TR/REC-html40">
  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>${worksheet}</x:Name>
    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    </head><body><table>${str}</table></body></html>`
  // 下載模板
  window.location.href = uri + this.base64(template)
},//showList是table數據

以上是我最近用過的2中前端導出excel的方法。

Tags: jsexcel

相關文章:

  1. 123
    1
    你頁面掛了, 大佬
  2. 123
    2
    樣式錯誤 ,丑的飛起
任选9场吧