vue完成页面数据的导出(不走后端)
2.创建一个新的js文件写入以下导出内容,便于全局使用(我这里是放在了组件里)3.在main.js中引用(注意文件路径)1.首先npm组件到src项目中。4.在vue方法中进行调用。
·
1.首先npm组件到src项目中
npm install --save xlsx file-saver
2.创建一个新的js文件写入以下导出内容,便于全局使用(我这里是放在了组件里)
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {
// 导出Excel表格
exportExcel(name, tableName) {
//name表示生成excel的文件名 tableName表示表格的id
var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, selIn)
}
return selIn
}
};
3.在main.js中引用(注意文件路径)
//导出组件 文件路径为你创建js文件的路径
import outToExcel from "@/components/ExportExcelUtils/outToExcel";
// 全局方法挂载 outToExcel(随意名称) = outToExcel(引入的名称);
Vue.prototype.outToExcel = outToExcel;
// 全局组件挂载 (随意名称,挂载的名称)
Vue.component('outToExcel', outToExcel)
Vue.use(outToExcel)
4.在vue方法中进行调用
<template>
<div>
<el-table id="table"></el-table>
</template>
</div>
<script>
export default {
data() {
return{
params:{}
};
},
create(){
},
methods:{
/** 导出按钮操作 */
handleExport() {
//参数一:生成excel的文件名 参数二:表格的id
this.outToExcel.exportExcel("文件名.xlsx","#table");
}
}
};
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)