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))) },
  • 相关阅读:
    微信小程序开发---各代码文件简介
    LeetCode71. 简化路径
    LeetCode70. 爬楼梯
    LeetCode69. x 的平方根
    LeetCode68. 文本左右对齐
    LeetCode剑指 Offer 09. 用两个栈实现队列
    LeetCode67. 二进制求和
    LeetCode66. 加一
    LeetCode65. 有效数字
    LeetCode64. 最小路径和
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11429637.html
Copyright © 2011-2022 走看看