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))) },
  • 相关阅读:
    sql 行转列
    wm_concat函数 用法
    PL/SQL如何调试Oracle存储过程
    Oracle&SQLServer中实现跨库查询
    Oracle 中 decode 函数用法
    Oracle中给用户赋予debug权限
    Oracle中的NVL函数
    oracle 触发器 pragma autonomous_transaction
    ORACLE中%TYPE和%ROWTYPE的使用
    A complete example using RAISE_APPLICATION_ERROR : raise_application_error
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11429637.html
Copyright © 2011-2022 走看看