页面table转存为pdf

        捣鼓了半星期的table另存为pdf,前端找了一堆方法,后端找了一堆方法。但是在系统中要用哪种方式实现,它们的优缺点还不知道从哪儿入手想(这个得好好考虑)。先把找到的实现方式总结一下吧。

        前端用一个tableexport.js插件方法。

        代码:

        在tableexport.js中为实现导出到pdf,引入了另外两个插件jspdf和pdfmake。



        后端java用iTextpdf,iText,Xml...

        引jar包:

        测试类:


        原理:核心是**。


总结:

        对js插件有了个初步了解。

        js太强大了,前后端通吃,全栈~~。

        编程语言的相通性,有了那么点感觉。你看同样的功能,多种实现方式,但是核心是一样的。

        还有很多要学的东西。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
Bootstrap 5 是一个流行的前端框架,主要用于快速构建响应式和移动优先的网站。其中,对于表格Table)的导出为PDF,虽然Bootstrap本身不直接提供这个功能,但你可以借助一些第三方库或插件来实现。 例如,"BootstraTable" 和 "jsPDF" 这两个JavaScript库组合使用,可以轻松地将Bootstrap Table的内容转换PDF格式: 1. **BootstraTable**:这是一个用于创建交互式表格的强大插件,提供了丰富的选项和定制功能。 2. **jspdf**:是一个小巧的JavaScript库,用于生成PDF文件,支持HTML内容作为输入。 步骤大致如下: - 引入必要的库(例如:`bootstrap-table.min.js`, `bootstrap-table-export.js`, 和 `jspdf.min.js`) - 在HTML中初始化Bootstrap Table - 加载`bootstraptable-export`插件 - 创建PDF实例并调用导出方法 示例代码片段可能如下所示: ```html <!-- 引入 Bootstrap 和 BootstraTable --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.19.2/bootstrap-table.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table-export/1.3.0/bootstrap-table-export.min.js"></script> <!-- 初始化 Bootstrap Table --> <table id="myTable" data-source="your_data_source"></table> <!-- JavaScript部分 --> <script> $(document).ready(function () { $('#myTable').bootstrapTable({ // 设置表格配置... }); $('#myTable').bootstrapTableExport({ type: 'pdf', // 或者 'excel', 'csv' exportDataType: 'all', // 可选值:all, selection fileName: 'my_table_pdf.pdf', // PDF文件名 tableId: 'myTable', // 表格ID }); }); </script> ```
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值