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))) },
  • 相关阅读:
    postfix队列管理
    fdisk添加磁盘
    postfix日志分析pflogsumm
    ioctl接口内容操作
    linux 路由表设置 之 route 指令详解
    手把手教你用 Strace 诊断问题
    rtsp学习----海康RTSP客户端连接深入分析
    栈回溯技术
    objdump命令
    linux中的strip命令简介------给文件脱衣服
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11429637.html
Copyright © 2011-2022 走看看