vue function method to achieve export Excel tables

// export Excel spreadsheet
handleExportExcelFn(){
  // json data to be exported
  jsonData = const [
    {
      name: 'passerby'
      phone:'123456',
      email: '[email protected] '
    },
    {
      name: 'fodder B',
      phone:'123456',
      email: '[email protected] '
    },
    {
      name: 'prop-bandit',
      phone:'123456',
      email: '[email protected] '
    },
    {
      name: 'rogue D',
      phone:'123456',
      email: '[email protected] '
    },];
    // column headings
    let str = '<tr> <td> Name </ td> <td> Phone </ td> <td> mailbox </ td> </ tr>';
    // Loop through each row was added tr tag, each tag cell plus td
    for(let i = 0 ; i < jsonData.length ; i++ ){
      str+='<tr>';
      for(let item in jsonData[i]){
        // Add \ t To keep table shows the scientific notation or other formats
        str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
      }
      str+='</tr>';
    }
  //Worksheet名
  let worksheet = 'Sheet1'
  let uri = 'data:application/vnd.ms-excel;base64,';
  // downloadable spreadsheet template data
  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>
        `;
  // template download
  window.location.href = uri + this.base64(template)
},
// base64 encoded output
base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) },

Guess you like

Origin www.cnblogs.com/dongyuezhuang/p/11429637.html