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]){
        //增加\t为了不让表格显示科学计数法或者其他格式
        str+=`<td>${ jsonData[i][item] + '\t'}</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))) },

转载于:https://www.cnblogs.com/dongyuezhuang/p/11429637.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值