Question

我正在使用springboot并将jsp用于UI。

我已从数据库中获取预订详细信息并使用表格显示。单击（DownloadPDF）按钮时，UI中显示的所有预订详细信息均应以pdf格式下载。

我已经在脚本标签中将HTML-to-PDF与jQuery（docraptor.com）结合使用了。我正在将pdf作为纵向模式，因此只有部分细节由pdf显示，但是我想要pdf在横向模式下。如何解决此问题？

booking.jsp：

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">


.marquee {
    background: blue;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 20s linear;
    margin-right: 10000px;
}

@-webkit-keyframes rightThenLeft {
    0%   {margin-right:100%;}
    50%  {margin-right:0;}
    100% {margin-right:100%;}


    @media print {
      #pdf-button {
        display: none;

      }
    }


}
</style>

<script src="https://docraptor.com/docraptor-1.0.0.js"></script>



<script type="text/javascript">
var downloadPDF = function() {

    DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
      test: true, 
      type: "pdf",

      document_content: document.querySelector('#f1').innerHTML, 

    })

  }

</script>

</head>
<body bgcolor="pink">

<div id="render">
<div class="c1" id="f1"  >
<form class="bookings" method="post" action="getAllBooking" >


<table id="table1" class="table1" border="1" align="center" cellspacing="8" cellpadding="8" bgcolor="grey">
<h2 align="center" class="marquee">Booking details</h2>

<%
int len=0;

String id=request.getParameter("User");
String driver="com.mysql.jdbc.Driver";
String con="jdbc:mysql://localhost:3306/";
String db="carui";
String User="root";
String Password="oracle@123";
try
{
    Class.forName(driver);
}
catch(ClassNotFoundException e)
{
    e.printStackTrace();
}
Connection conn=null;
Statement st=null;
ResultSet rs=null;

%>
<%
try
{
    conn=DriverManager.getConnection(con+db,User,Password);
    st=conn.createStatement();
    String sql="select *from  bookings";
    rs=st.executeQuery(sql);
    %>
    <tr>
    <th>Car Id</th>
    <th>Booking Id</th>
    <th>StartDate</th>
    <th>EndDate</th>
    <th>Persons</th>
    <th>Mobile</th>
    <th>Email</th>
    <th>Place1</th>
    <th>Place2</th>
    <th>Person Name</th>
    </tr>
    <tbody>
    <%
    while(rs.next())
    {
        %>

        <%
        int carId=rs.getInt("cars_id");
        int id1=rs.getInt("id");
        String start=rs.getString("startdate");
        String end=rs.getString("enddate");
        int persons=rs.getInt("persons");
        String mobile=rs.getString("p_number");

        String mail=rs.getString("p_email");
        String place1=rs.getString("place1");
        String place2=rs.getString("place2");
        String name=rs.getString("p_name");


        %>
        <tr>
        <td><%=carId%></td>
        <td><%=id1%></td>
        <td><%=start%></td>
        <td><%=end%></td>
        <td><%=persons%></td>
        <td><%=mobile%></td>
        <td><%=mail %></td>
        <td><%=place1 %></td>
        <td><%=place2 %></td>
        <td><%=name %></td>
        </tr>

        <%
    }
    %>
    </tbody>
    <%
    }


catch(Exception e)
{
    e.printStackTrace();
}

    %>
</table>


</form>
</div>
</div>
<form>
<div id="f2">

 <input id="pdf-button" type="button" value="Download PDF" onclick="downloadPDF()" />
</div>

</form>


</body>
</html>

Answer 1

   <script>
    function HTMLtoPDF() {
        var pdf = new jsPDF('p', 'px', 'a4');

        source = $('#maindiv')[0];
        specialElementHandlers = {
            '#bypassme' : function(element, renderer) {
                return true
            }
        }

        margins = {
            top : 50,
            left : 40,
            width : 200
        };

        pdf.fromHTML(source // HTML string or DOM elem ref.
        , margins.left // x coord
        , margins.top // y coord
        , {
            'width' : margins.width // max width of content on PDF
            ,
            'elementHandlers' : specialElementHandlers
        }, function(dispose) {
            // dispose: object with X, Y of the last line add to the PDF
            //          this allow the insertion of new lines after html
            pdf.save('OfficeNote.pdf');
        })
    }
</script>

单击按钮时，通过jsp页面生成pdf

1 个答案: