| New file |
| | |
| | | <template> |
| | | <div class="table1"> |
| | | <div class="about"> |
| | | <el-button @click="downExcel">下载</el-button> |
| | | <el-table id="table" :data="tableData" stripe style="width: 100%"> |
| | | <el-table-column prop="date" label="日期" width="180"> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="姓名" width="180"> |
| | | </el-table-column> |
| | | <el-table-column prop="address" label="地址"> </el-table-column> |
| | | </el-table> |
| | | <el-pagination background layout="prev, pager, next" :total="1000"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import FileSaver from "file-saver"; |
| | | import XLSX from "xlsx"; |
| | | export default { |
| | | data() { |
| | | return { |
| | | tableData: [ |
| | | { |
| | | date: "2016-05-02", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1518 弄" |
| | | }, |
| | | { |
| | | date: "2016-05-04", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1517 弄" |
| | | }, |
| | | { |
| | | date: "2016-05-01", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1519 弄" |
| | | }, |
| | | { |
| | | date: "2016-05-03", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1516 弄" |
| | | } |
| | | ] |
| | | }; |
| | | }, |
| | | methods: { |
| | | downExcel() { |
| | | let et = XLSX.utils.table_to_book(document.getElementById("table")); |
| | | let etout = XLSX.write(et, { |
| | | bookType: "xlsx", |
| | | bookSST: true, |
| | | type: "array" |
| | | }); |
| | | try { |
| | | FileSaver.saveAs( |
| | | new Blob([etout], { |
| | | type: "application/octet-stream" |
| | | }), |
| | | `表.xlsx` |
| | | ); //导出的文件名 |
| | | } catch (e) { |
| | | console.log(e, etout); |
| | | } |
| | | return etout; |
| | | } |
| | | }, |
| | | mounted() {} |
| | | }; |
| | | </script> |
| | | <style> |
| | | .table1 { |
| | | height: 100%; |
| | | width: 1005; |
| | | display: none; |
| | | } |
| | | </style> |