如何将table里的内容导出到excel

开发时有遇到要将table里的内容导出excel的操作,百度了下,觉得还是插件比较方便

 

插件:jquery-table2excel

下载地址: 网盘地址      密码:y00w

使用方法:

       1.将下载的文件夹里的  src/jquery.table2excel.js 引入页面

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.table2excel.js"></script>  
   2.初始化插件    
$("#table2excel").table2excel({
  // 不被导出的表格行的CSS class类
  exclude: ".noExl",
  // 导出的Excel文档的名称
  name: "Excel Document Name",
  // Excel文件的名称
  filename: "myExcelTable"
}); 

 

        exclude:不被导出的表格行的CSS class类。

        name:导出的Excel文档的名称。

        filename:Excel文件的名称。

        exclude_img:是否导出图片。

        exclude_links:是否导出超链接

        exclude_inputs:是否导出输入框中的内容。

         'table2excel' : table标签 的id

   3.示例

HTML

<table border="1" width="80%" style="font-family: 微软雅黑; font-size: 12pt; border-collapse:collapse" cellpadding="0" bordercolor="#000000" class="exportTable">
    <tr>
        <td width="2%" align="center" bgcolor="#FFFF00">单号类型</td>
        <td width="3%" align="center" bgcolor="#FFFF00">单号</td>
        <td width="3%" align="center" bgcolor="#FFFF00">当前状态</td>
    </tr>
</table>
<button class="excelButton">导出excel</button>

JS

$(document).on('click','.excelButton',function(){
        $(".exportTable").table2excel({
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "myFileName",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
})

 

 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在前端使用Vue导出表格样式为Excel,可以通过以下步骤实现: 1. 首先,你需要安装并引入`xlsx`和`file-saver`这两个库。`xlsx`用于生成Excel文件,`file-saver`用于保存文件。 ```bash npm install xlsx file-saver ``` 2. 在Vue组件中,你可以创建一个方法来处理导出操作。首先,需要将表格数据转换为Excel的数据格式。可以使用`xlsx`库的`utils.json_to_sheet()`方法将JSON数据转换为Excel的Sheet对象。 ```javascript import XLSX from 'xlsx'; import { saveAs } from 'file-saver'; export default { methods: { exportToExcel() { // 获取表格数据 const tableData = this.getTableData(); // 创建一个工作簿 const workbook = XLSX.utils.book_new(); // 将表格数据转换为Sheet对象 const sheet = XLSX.utils.json_to_sheet(tableData); // 将Sheet对象添加到工作簿中 XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1'); // 生成Excel文件的二进制数据 const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 将二进制数据保存为Excel文件 const blob = new Blob([excelData], { type: 'application/octet-stream' }); saveAs(blob, 'table.xlsx'); }, getTableData() { // 获取表格数据的方法,根据你的具体实现进行编写 } } } ``` 3. 在Vue模板中,可以添加一个按钮或其他触发导出操作的元素,并绑定`exportToExcel`方法。 ```html <template> <div> <table> <!-- 表格内容 --> </table> <button @click="exportToExcel">导出Excel</button> </div> </template> ``` 这样,当用户点击"导出Excel"按钮时,会触发`exportToExcel`方法,将表格数据导出Excel文件并保存到本地。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值