前端导出excel,js-xlsx导出

本文介绍了在Vue和Element UI项目中如何使用js-xlsx库实现前端导出表格数据到Excel文件。主要针对从table标签中导出内容的需求,提供了git链接下载js-xlsx库,并给出了npm安装步骤、关键代码示例以及如何调用导出方法。如果需要自定义样式或更多功能,建议查看作者提供的方法二。
摘要由CSDN通过智能技术生成

可以直接用table标签导出,我的是 Vue + element 的项目

需求

看了很多个文档和案例写的一个功能,因为之前都是在后端导出了,第一次前端导出excel。

环境

我业务需求只用到将table标签内的内容导出到excel,所以只会写如何将一个table元素里的内容导出到excel。

git链接下载: https://codechina.csdn.net/mirrors/SheetJS/js-xlsx?utm_source=csdn_github_accelerator.

npm安装下面

npm install xlsx

直接上代码,下载后 import 到页面

<template>
    <div style="margin:20px">
        <div >&lt; 返回</div>
        <div >预算表</div>
        <table id="table1" class="myClass_style" border="1" cellspacing="0"  cellpadding="0" >
            <thead>
                <tr id="theadName" style="height:40px;font-weight:600;background-color:#EEFD6F;text-align:center">
                </tr>
            </thead>
            <tbody>
                <tr id="theadContent" >
                    <td>{
   {
   item.my2Arr1}}</td>
                    <td style="background:#A7F0EF">1111</td>
                    <td style="background:#A7F0EF"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个利用 js-xlsx 实现 Excel 文件导入导出功能的示例: 首先在 HTML 文件中引入 js-xlsx 库: ```html <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script> ``` 然后在 JavaScript 文件中编写以下代码: ```javascript // 导出 Excel 文件 function exportExcel(data, filename) { const ws = XLSX.utils.json_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, `${filename}.xlsx`); } // 导入 Excel 文件 function importExcel(file, callback) { const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const result = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); callback(result); }; } ``` 其中,exportExcel 函数用于将数据导出Excel 文件,参数 data 为要导出的数据,filename 为导出的文件名。 importExcel 函数用于导入 Excel 文件,参数 file 为要导入的文件,callback 为导入成功后的回调函数,回调函数的参数 result 为导入的数据。 示例代码中使用了 FileReader 对象读取文件内容,然后使用 js-xlsx 库解析 Excel 文件并将数据转化为 JSON 格式。 使用示例: ```javascript const data = [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' }, ]; exportExcel(data, 'test'); // 导出 Excel 文件,文件名为 test.xlsx const inputElement = document.getElementById('input-file'); inputElement.addEventListener('change', (e) => { const file = e.target.files[0]; importExcel(file, (result) => { console.log(result); // 输出导入的数据 }); }); ``` 在 HTML 文件中添加一个文件选择框: ```html <input type="file" id="input-file"> ``` 用户选择一个 Excel 文件后,调用 importExcel 函数导入数据,并在回调函数中处理导入的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值