D2admin导出Execl

最新推荐文章于 2024-08-08 07:09:34 发布

Kevin M

最新推荐文章于 2024-08-08 07:09:34 发布

阅读量635

点赞数

分类专栏： vue HTML

本文链接：https://blog.csdn.net/qq_39072819/article/details/103813121

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

 
 
<template>
  <el-button @click="exportToExcel">导出Excel</el-button>
 
  <el-table  :data="tableData3"  style="width: 100%" id="table-content">
    <el-table-column  prop="date"  label="日期"  width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column  prop="name"  label="姓名"  width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column  prop="province"  label="省份"  width="120">
        </el-table-column>
        <el-table-column  prop="city"  label="市区"  width="120">
        </el-table-column>
        <el-table-column  prop="address"  label="地址"  width="300">
        </el-table-column>
        <el-table-column  prop="zip" label="邮编"  width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
 
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
 
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },methods:{
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); 
    //document.getElementById('xxxx'):XXX此处传入table的DOM节点，即el-table的id名称
    let etout = XLSX.write(et, {
        bookType: 'xlsx', 
        bookSST: true, 
        type: 'array' 
    });
    try {
        FileSaver.saveAs(new Blob([etout], { 
            type: 'application/octet-stream' 
        }), 'table.xlsx');   //XXX.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
},
//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}
}
  }
</script>
 
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
 
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },methods:{
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); 
    //document.getElementById('xxxx'):XXX此处传入table的DOM节点，即el-table的id名称
    let etout = XLSX.write(et, {
        bookType: 'xlsx', 
        bookSST: true, 
        type: 'array' 
    });
    try {
        FileSaver.saveAs(new Blob([etout], { 
            type: 'application/octet-stream' 
        }), 'table.xlsx');   //XXX.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
},
//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}
}
  }
</script>