纯前端生成Excel的两种方法

一、生成的是.csv文件，伪装成Excel文件，很多情况打不开

public downloadExcel(){

let tableJson = [

 {
        name:'AML',
        phone:'123456',
        email:'123@123456.com'
      },
      {
        name:'AML',
        phone:'123456',
        email:'123@123456.com'
      },
      {
        name:'I3',
        phone:'123456',
        email:'123@123456.com'
      },
      {
        name:'THEL',
        phone:'123456',
        email:'123@123456.com'
      },

]

// 第一行是标题(表头)每一列用半角逗号隔开。

let csvStr:any = tableJson.map((item:any) => {

// 加\t是为了不让数字以科学计数法显示。

let valueList = Object.keys(item).map((key:any) => item[key])

return valueList.join(',\t')

})

csvStr = '姓名,电话,地址,\n' + csvStr.join(',\n')



// encodeURIComponent解决中文乱码。

const href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csvStr)

const aHtml = document.createElement('a')

aHtml.download = 'fe_table.xlsx' // 通过修改后缀名伪装成Excel

aHtml.href = href

aHtml.click()

}

二、生成Excel升级版，直接生成的是.xls

public downloadExcel(){
    const jsonData:any = [
      {
        name:'AML',
        phone:'123456',
        email:'123@123456.com'
      },
      {
        name:'AML',
        phone:'123456',
        email:'123@123456.com'
      },
      {
        name:'I3',
        phone:'123456',
        email:'123@123456.com'
      },
      {
        name:'THEL',
        phone:'123456',
        email:'123@123456.com'
      },
    ]
//新方法
     let str = '<tr><td>name</td><td>phone</td><td>email</td></tr>';
      //循环遍历，每行加入tr标签，每个单元格加td标签
      for(let i = 0 ; i < jsonData.length ; i++ ){
        str+='<tr>';
        for(let item in jsonData[i]){
            //增加\t为了不让表格显示科学计数法或者其他格式
            str+=`<td>${ jsonData[i][item] + '\t'}</td>`;     
        }
        str+='</tr>';
      }
      //Worksheet名
      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><meta charset="UTF-8"><!--[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)
}
public base64 (s:any) { return window.btoa(unescape(encodeURIComponent(s))) }

 

posted @ 2020-08-27 10:56  hannahY  阅读(4410)  评论(0)  编辑  收藏  举报