asp 做网站的缺点,洛阳网站建设优惠公司,大学网站建设情况汇报,谷歌网站怎么做外链解决vue项目中导出当前页表格为Excel表格的方案 用到的技术#xff1a;
Vue2Element-uifile-saverxlsx
1、创建vue项目#xff0c;安装element-ui
2、创建一个组件#xff0c;组件内放入表格#xff0c;和导出按钮 templatediv!-- 导出的按钮 --
Vue2Element-uifile-saverxlsx
1、创建vue项目安装element-ui
2、创建一个组件组件内放入表格和导出按钮 templatediv!-- 导出的按钮 --el-button sizesmall typeprimary iconel-icon-download clickexportData导出/el-button!-- 表格数据 --el-table idmyTable :datatableData stylewidth: 100% borderel-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 /el-table-column/el-table/div
/templatescript
export default {props: {},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: {}/scriptstyle scoped langless/style
3、安装导出表格需要的插件【xlsx 和 file-saver】 npm install --save xlsx file-saver 4、在main.js中引入安装的依赖
// 引入导出excel的插件
import FileSaver from file-saver
import * as XLSX from xlsx
Vue.prototype.$FileSaver FileSaver; //设置全局
Vue.prototype.$XLSX XLSX; //设置全局5、编写导出功能 //导出功能exportData() {let excelName 导出表格名称.xlsxvar xlsxParam { raw: true } //转换成excel时使用原始的格式// 克隆节点let tables document.getElementById(myTable).cloneNode(true)// 判断是否为固定列解决为固定列时会重复生成表格if (tables.querySelector(.el-table__fixed) ! null) {tables.removeChild(tables.querySelector(.el-table__fixed))}let table_book this.$XLSX.utils.table_to_book(tables, xlsxParam)var table_write this.$XLSX.write(table_book, {bookType: xlsx,bookSST: true,type: array})try {this.$FileSaver.saveAs(new Blob([table_write], { type: application/octet-stream }),excelName)} catch (e) {if (typeof console ! undefined) console.log(e, table_write)}return table_write}搞定
完整代码
templatediv!-- 导出的按钮 --el-button sizesmall typeprimary iconel-icon-download clickexportData导出/el-button!-- 表格数据 --el-table idmyTable :datatableData stylewidth: 100% borderel-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 /el-table-column/el-table/div
/templatescript
export default {props: {},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: {//导出功能exportData() {let excelName 导出表格名称.xlsxvar xlsxParam { raw: true } //转换成excel时使用原始的格式// 克隆节点let tables document.getElementById(myTable).cloneNode(true)// 判断是否为固定列解决为固定列时会重复生成表格if (tables.querySelector(.el-table__fixed) ! null) {tables.removeChild(tables.querySelector(.el-table__fixed))}let table_book this.$XLSX.utils.table_to_book(tables, xlsxParam)var table_write this.$XLSX.write(table_book, {bookType: xlsx,bookSST: true,type: array})try {this.$FileSaver.saveAs(new Blob([table_write], { type: application/octet-stream }),excelName)} catch (e) {if (typeof console ! undefined) console.log(e, table_write)}return table_write}},components: {}
}
/scriptstyle scoped langless/style
