【问题标题】:I want to convert html table DATA to pdf and download it using jquery the code is as below我想将 html 表 DATA 转换为 pdf 并使用 jquery 下载,代码如下
【发布时间】:2013-07-04 18:46:01
【问题描述】:

我有一个 jsp 文件,它显示一个有 5 列的表格,我想在表格的同一页面上有一个按钮,它可以使用 jquery 下载 pdf 格式的表格内容。有人可以帮助我吗?我已将 jspdf 的 lib 文件添加到我的项目 js 文件夹中,并在我的 jsp 文件中提供了它们的路径,如下面的代码所示,我不明白出了什么问题,谁能帮忙??

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@page import="org.apache.log4j.Level"%>


<%@page import="java.util.ArrayList"%>

<%@page import="sevices.authentication.AuthorizationException"%>


<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intelligent System</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
        <script type='text/javascript' charset='utf-8' src='/ias/js/jquery.js'></script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>



        <script type="text/javascript" src="/ias/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="/ias/js/jsPDF.js"></script>
<script type="text/javascript" src="/ias/js/FileSaver.js"></script>
<script type="text/javascript" src="/ias/js/Blob.js"></script>
<script type="text/javascript" src="/ias/js/BlobBuilder.js"></script>
<script type="text/javascript" src="/ias/js/deflate.js"></script>
<script type="text/javascript" src="/ias/js/adler32cs.js"></script>








            <link href="/ias/css/demo_page.css" rel="stylesheet" type="text/css" media="screen" />
            <link href="/ias/css/demo_table.css" rel="stylesheet" type="text/css" media="screen" />



         <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#example2').dataTable();
            } );
            $("#button3").click(function() {
                var table = $("#example2").html();
                $(".result").html(table);
                var pdf = new jsPDF();
                pdf.text(table);
                pdf.save('message.pdf');
            });
        </script>
</head>
<body>

<jsp:include page="/jsp/session/menu.jsp"></jsp:include>
<!-- end #menu -->






    <div id="page">     
    VIEW MESSAGE
    <hr size="7" align="left" width="100%" color="#566316"> 

        <span style="color: red"><%=myMessage %></span>
        <%}

        %>
        <div class="entry">


        <div id="content" class="messages">

    <table cellpadding="0" cellspacing="0" border="0" align="left" class="display" id="example2" width="140%">          
<thead>
                            <tr>
                                <th>SR NO.</th>
                                <th>Message</th>
                                <th>Posted By</th>
                                <th>Date</th>
                                <th>Priority</th>
                            </tr>
                        </thead>

<tbody>                 


                <%




                            <tr class="separating_line">
                                    <td class="center" style="width: 4%" align="center">data1</td>
                                    <td style="width: 70%" valign="top" align="left">data2</td>
                                    <td class="center" style="width: 15%" align="center">data3</td>
                                    <td class="center"  style="width: 35%" align="center">data4 </td>
                                    <td class="center"  style="width: 15%" align="center">data5 </td>

                                </tr>




</tbody>
<tfoot>
                                <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                </tr>
                            </tfoot>
</table>

<button id="button3" name="button3" type="button">Import PDF</button>   
        </div>
        <!-- end #content -->
    </div>
<script type='text/javascript' charset='utf-8' src='/ias/js/shCore.js'></script>
        <div style="clear: both;">&nbsp;</div>


</div>

<!-- end #page -->
<jsp:include page="/jsp/footer.jsp"></jsp:include>
        <!-- end #footer -->
</body>
</html>

【问题讨论】:

    标签: java jquery jsp jspdf


    【解决方案1】:

    您是否包含了所有 jsPDF 库文件?

    <script type="text/javascript" src="jspdf.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
    <script type="text/javascript" src="./libs/Deflate/deflate.js"></script>
    <script type="text/javascript" src="./libs/Deflate/adler32cs.js"></script>
    

    【讨论】:

    • 我现在包含了它们,但没有任何区别,点击按钮根本不显示任何 catalina 日志
    • $("button3").click(function() { ... });你的button3在哪里?是class还是id?
    • 我包含了其中的 4 个,但我无法包含 deflate.js 和 adler32cs.js..我在哪里可以获得这两个文件及其代码?你能给我链接yeyene吗?
    • 别忘了你的 button3 必须是 $("#button3") 或 $(".button3")
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-01-21
    • 2018-02-11
    • 2013-08-21
    • 2017-11-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多