html table 導出excel,親測有效

時間 2019-11-17

標籤 html table 導出 excel 有效欄目 HTML 简体版

原文原文鏈接

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()
    },

複製代碼

相關標籤/搜索