vue实现excel导出

利用vue实现Excel导出,

因为ajax必须有返回,而导出excel是没有返回的,并且还在api中实现导出具体逻辑,所以就用下面的方式实现了

代码实例:

   beginExport(v){
        console.log(v);
        var param = Object.assign({}, v);//v是一个对象,将所有可枚举属性的值从一个或多个源对象复制到目标对象
        let paramStr = ``;//let 为es6新增的用来声明的变量,但是和var又不一样,let只在let所在的代码块有用,外面是会错的。
        console.log(param);
        for(let [k,v] of Object.entries(param)){//返回一个给定对象自身可枚举属性的键值对数组,有点类似foreach遍历,object.entries返回的就是我们平常用的数据,只是这里是对象。
        paramStr +=`${k}=${v}&`
    }
        console.log(paramStr);
        window.location.href='/api/complaint/export-fund-cash-order?'+paramStr;
    },

我是后端,但是我已经懂了

代码架构接之前的博文https://www.cnblogs.com/two-bees/p/11122327.html

附录:

https://www.jianshu.com/p/6f4537bb89b2

https://www.jianshu.com/p/e22113e3f614

转载于:https://www.cnblogs.com/two-bees/p/11171661.html

Vue可以利用第三方库来实现Excel的导入和导出,下面是一个简单的示例: 首先,安装`xlsx`和`file-saver`这两个库: ``` npm install xlsx file-saver --save ``` 然后在Vue组件中,定义一个方法来实现Excel导出: ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; export default { methods: { exportExcel() { // 构建Excel数据 const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'], ]; // 创建一个Workbook对象 const workbook = XLSX.utils.book_new(); // 创建一个Worksheet对象 const sheet = XLSX.utils.aoa_to_sheet(data); // 添加Worksheet到Workbook XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1'); // 生成Excel文件 const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 保存Excel文件 const fileName = 'data.xlsx'; const blob = new Blob([excelFile], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, fileName); }, }, }; ``` 以上代码中,我们使用`XLSX`库创建一个Workbook对象,并添加一个Worksheet对象。然后使用`FileSaver`库保存Excel文件。 接下来,我们来实现Excel的导入功能。在Vue组件中,定义一个方法来实现Excel导入: ```javascript import XLSX from 'xlsx'; export default { data() { return { tableData: [], }; }, methods: { importExcel(event) { // 获取上传的文件 const file = event.target.files[0]; // 创建一个FileReader对象 const reader = new FileReader(); // 读取Excel文件 reader.onload = (e) => { // 获取Excel文件数据 const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个Worksheet const sheet = workbook.Sheets[workbook.SheetNames[0]]; // 将Worksheet转换为JSON数据 const json = XLSX.utils.sheet_to_json(sheet, { header: 1 }); // 将JSON数据转换为表格数据 const tableData = []; for (let i = 1; i < json.length; i++) { const row = {}; for (let j = 0; j < json[0].length; j++) { row[json[0][j]] = json[i][j]; } tableData.push(row); } this.tableData = tableData; }; // 读取文件数据 reader.readAsArrayBuffer(file); }, }, }; ``` 以上代码中,我们使用`XLSX`库读取Excel文件,并将Worksheet转换为JSON数据。然后将JSON数据转换为表格数据,最终存储在Vue组件的`tableData`变量中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值