zoukankan      html  css  js  c++  java
  • 纯前端生成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) => {
    
    // 加	是为了不让数字以科学计数法显示。
    
    let valueList = Object.keys(item).map((key:any) => item[key])
    
    return valueList.join(',	')
    
    })
    
    csvStr = '姓名,电话,地址,
    ' + csvStr.join(',
    ')
    
    
    
    // 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]){
                //增加	为了不让表格显示科学计数法或者其他格式
                str+=`<td>${ jsonData[i][item] + '	'}</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))) }
  • 相关阅读:
    SpringMVC01_入门案例
    Spring10_AOP
    Spring09_动态代理
    VisualGC IDEA插件(原创)
    IDEA 项目文件图标渲染类 CompoundIconProvider
    Visual VM 垃圾回收性能监控开源插件, 支持Java 8和VisualVM 2.0
    VisualGC 3.0 独立运行增强版, 支持JDK 8
    SpringMVC总结
    SSM框架整合
    MySQL免安装版配置教程
  • 原文地址:https://www.cnblogs.com/yanghana/p/13570165.html
Copyright © 2011-2022 走看看