html table 导出excel,亲测有效

最新推荐文章于 2024-08-24 10:01:39 发布

weixin_34138056

最新推荐文章于 2024-08-24 10:01:39 发布

阅读量467

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bfe724ce51d452db500c1d8

版权

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

复制代码