vue 导出 指定字段Excel 和封装

```bash
main.js
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX
事件执行
      var list = [
        {
          id: 142,
          uid: 12820382,
          name: "", 
          crypto: "COPE", 
          amount: 16419380925822,
          lockAmount: 0
          }
          ]
         let tableData = [
                ['id','uid', 'name','crypto', 'amount',"lockAmount"]//导出表头
            ] 
      
      // 表格表头
               list.forEach ((item,index)=> {
                  let rowData = []
                    //导出内容的字段
                   rowData = [
                        item.id,
                        item.uid,
                        item.name,
                        item.crypto,
                      item.amount,
                         item.lockAmount
                    ]
                     tableData.push(rowData)
               })
                 let ws = this.XLSX.utils.aoa_to_sheet(tableData)
                 let wb = this.XLSX.utils.book_new()
                this.XLSX.utils.book_append_sheet(wb, ws, '来访记录') // 工作簿名称
                 this.XLSX.writeFile(wb, 'xx.xlsx') // 保存的文件名

	 封装 事件
     方法 引入 import plus from "@/components/export.js";
      var list = [
        {
          id: 142,
          uid: 12820382,
          name: "", 
          crypto: "COPE", 
          amount: 16419380925822,
          lockAmount: 0
          }
          ]
       let tableData = [
           ['id','uid', 'name','crypto', 'amount',"lockAmount"]//导出表头
       ] 
       let tableDatatilte = 
           ['id','uid', 'name','crypto', 'amount',"lockAmount"]//导出字段
		参数 数据  title 要取得字段
       plus.a(list,tableData,tableDatatilte)
		
		封装的export.js文件
		import XLSX from 'xlsx'
		import Vue from 'vue'
		var elui = new Vue()
		import XLSX from 'xlsx'
		export default {
		exportTable(list,tableData,tableDatatilte){
		
		  elui.$alert('是否导出全部数据?', '导出表格', {
		        confirmButtonText: '确定',
		        distinguishCancelAndClose:true,
		        callback: action => {
		          if(action=='confirm'){
		           this.tableData(list,tableData,tableDatatilte)
		          }else{
		       
		          }
		        },
		      });
		    },
		    tableData(list,tableData,tableDatatilte) {
		        
		        list.forEach ((item)=> {
		            let rowData = []
		            //导出内容的字段
		            for(let i=0;i<tableDatatilte.length;i++){
		                rowData.push( item[tableDatatilte[i]])
		        }
		            tableData.push(rowData)
		        })
		       
		        console.log(tableData)
		         return
		        let ws = XLSX.utils.aoa_to_sheet(tableData)
		        let wb = XLSX.utils.book_new()
		        XLSX.utils.book_append_sheet(wb, ws, '来访记录') // 工作簿名称
		        XLSX.writeFile(wb, 'xx.xlsx') // 保存的文件名
		}
		}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,可以使用 `xlsx` 库来封装导出Excel文件的功能。下面是一个简单的示例,展示了如何使用 `xlsx` 库导出Excel文件。 首先,安装 `xlsx` 库: ```bash npm install xlsx ``` 然后,在需要导出Excel文件的组件中,创建一个方法来封装导出功能: ```javascript // 导入xlsx库 import XLSX from 'xlsx'; export default { methods: { exportToExcel() { // 创建一个工作簿对象 let wb = XLSX.utils.book_new(); // 创建一个工作表对象 let ws = XLSX.utils.json_to_sheet(yourDataArray); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作簿转换为Excel文件的二进制数据流 let excelData = XLSX.write(wb, { type: 'array', bookType: 'xlsx' }); // 创建一个Blob对象,并将Excel数据流放入其中 let blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 创建一个下载链接,并设置下载属性 let downloadLink = document.createElement('a'); downloadLink.href = window.URL.createObjectURL(blob); downloadLink.download = 'filename.xlsx'; // 触发点击下载链接 downloadLink.click(); } } } ``` 在上面的代码中,`yourDataArray` 是你要导出的数据数组。你需要将其转换为工作表对象,并添加到工作簿中。然后,将工作簿转换为Excel文件的二进制数据流,最后创建一个下载链接并触发点击,即可下载导出Excel文件。 请注意,上面的示例代码中的 `filename.xlsx` 是导出Excel文件的文件名,你可以根据自己的需求修改它。 希望这可以帮助到你!如果你有任何其他问题,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值