zoukankan      html  css  js  c++  java
  • vue中实现导出Excel表格的函数方法

    //导出Excel表格
    handleExportExcelFn(){
      //要导出的json数据
      const jsonData = [
        {
          name:'路人甲',
          phone:'123456',
          email:'123@123456.com'
        },
        {
          name:'炮灰乙',
          phone:'123456',
          email:'123@123456.com'
        },
        {
          name:'土匪丙',
          phone:'123456',
          email:'123@123456.com'
        },
        {
          name:'流氓丁',
          phone:'123456',
          email:'123@123456.com'
        },];
        //列标题
        let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</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">
            <meta charset="utf-8">
            <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)
    },
    //输出base64编码
    base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) },
  • 相关阅读:
    集群、分布式与微服务概念和区别理解
    博弈论的入门——nim游戏&&sg函数浅谈
    csp-2020 初赛游记
    洛谷 P2340 [USACO03FALL]Cow Exhibition G 题解
    P5687 [CSP-SJX2019]网格图 题解
    HBase 数据迁移/备份方法
    mac远程连接服务上传下载命令实例
    Redis安装详细步骤
    VMware虚拟机中的CentOS服务安装Nginx后本机无法访问的解决办法
    开发业务逻辑处理之策略模式场景使用
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11429637.html
Copyright © 2011-2022 走看看