html table 匯出excel,親測有效

L1114發表於2018-11-28
HTMLExcel
   tableToExcel (fileName) {
      // 獲取dom元素(此寫法適用於element-ui 的table元件)
      let table1 = this.$refs.table.$el.getElementsByTagName('table')[0]
      let table2 = this.$refs.table.$el.getElementsByTagName('table')[1]
      console.log('table1 :', table1)
      let str = table1.outerHTML + table2.outerHTML
      str = str.replace(/border="0"/g, 'border="1"')
      console.log('str :', str)
      // 使用outerHTML屬性獲取整個table元素的HTML程式碼（包括<table>標籤），然後包裝成一個完整的HTML文件，設定charset為urf-8以防止中文亂碼
      //style 防止表格數字以科學計數法的形式顯示
      let style=<style>th,td,.cell{
        mso-ignore:padding;
        mso-number-format:"\\@";//主要是這局
        mso-background-source:auto;
        mso-pattern:auto;
      }</style>
      var html = "<html><head><meta charset='utf-8' /></head><body>" + style+str + '</body></html>'
      // 例項化一個Blob物件，其建構函式的第一個引數是包含檔案內容的陣列，第二個引數是包含檔案型別屬性的物件
      var blob = new Blob([html], { type: 'application/vnd.ms-excel' })
      var a = document.createElement('a')
      // 利用URL.createObjectURL()方法為a元素生成blob URL
      a.href = URL.createObjectURL(blob)
      // 設定檔名
      a.download = fileName + '.xls'
      a.click()
    },

複製程式碼

相關文章