时间戳

首页 > 解决方案 > 如何使用在样式标签中包含 css 的 javascript 将 html 文件转换为 pdf

javascript - 如何使用在样式标签中包含 css 的 javascript 将 html 文件转换为 pdf

问题描述

我如何将html文件转换为pdf任何人请帮助我，该页面包含一个单击按钮的按钮，pdf将保存到客户端计算机，并且在pdf中没有按钮的图像

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-storage.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
  <script src="js/invoice.js"></script>
  <meta charset="utf-8">
  <title>Invoice Premimum Buses</title>
<style>

@font-face {
font-family: SourceSansPro;
src:  url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
 }

.clearfix:after {
 content: "";
 display: table;
 clear: both;
 }

 a {
color: #0087C3;
text-decoration: none;
 }

 body {
position: relative;
width: 21cm;  
height: 29.7cm; 
margin: 0 auto; 
color: #555555;
background: #FFFFFF; 
font-family: Arial, sans-serif; 
font-size: 14px; 
font-family: SourceSansPro;
}

header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #AAAAAA;
}

#logo {
float: left;
margin-top: 8px;
}

#logo img {
height: 70px;
}

#company {
float: right;
text-align: right;
}


#details {
margin-bottom: 50px;
 }

#client {
 padding-left: 6px;
 border-left: 6px solid #0087C3;
 float: left;
}

#client .to {
color: #777777;
}

h2.name {
font-size: 1.4em;
font-weight: normal;
margin: 0;
}

#invoice {
float: right;
text-align: right;
}

#invoice h1 {
color: #0087C3;
font-size: 2.4em;
line-height: 1em;
font-weight: normal;
margin: 0  0 10px 0;
  }



table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}

table th,
table td {
  padding: 20px;
  background: #EEEEEE;
  text-align: center;
  border-bottom: 1px solid #FFFFFF;
 }

 table th {
white-space: nowrap;        
font-weight: normal;
}

  </style>
</head>

<body>
  <div class="main-ticket">
    <header class="clearfix">
     <div id="company">
    <h2 class="name">Premimum Buses</h2>
    <div>Dr AIT Banglore</div>
    <div>(+91) 87099-60796</div>
    <div>divprnc@gmail.com</div>
    </div>
  </div>
  </header>
<main>
<div id="details" class="clearfix">
   <div id="client">
    <div class="to">INVOICE TO:</div>
    <h2 class="name" id="cname">John Doe</h2>
    <div class="email" id="cemail">kmrprnc@gmail.com</div>
    <div class="email" id="cfrom">From</div>
    <div class="email" id="ctoo">To</div>
  </div>
  <div id="invoice">
    <h1 id="tour-name">Tour Name</h1>
    <div class="date" id="order-id">order-id : sdfjasddfkjasdldfjk</div>
    <div class="date" id="boarding-time">Boarding Time: 9:00</div>
    <div class="date" id="departure-date">Departure Date: 30/06/2014</div>
  </div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th class="no">#</th>
      <th class="desc">Name</th>
      <th class="unit">Age</th>
      <th class="qty">Gender</th>
      <th class="qty">Seat Number</th>
      <th class="total">Price</th>
    </tr>
  </thead>
  <tbody id="set-data-cust">
    <!-- <tr>
        <td class="no">01</td>
        <td class="desc"><h3>Website Design</h3></td>
        <td class="unit">$40.00</td>
        <td class="qty">30</td>
        <td class="qty">30</td>
        <td class="total">$1,200.00</td>
      </tr> -->
    <!-- <tr>
        <td class="no">02</td>
        <td class="desc"><h3>Website Development</h3></td>
        <td class="unit">$40.00</td>
        <td class="qty">80</td>
        <td class="qty">80</td>
        <td class="total">$3,200.00</td>
      </tr>
      <tr>
        <td class="no">03</td>
        <td class="desc"><h3>Search Engines Optimization</h3></td>
        <td class="unit">$40.00</td>
        <td class="qty">20</td>
        <td class="qty">20</td>
        <td class="total">$800.00</td>
      </tr> -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"></td>
      <td colspan="2">SUBTOTAL</td>
      <td id="sub-price">s</td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td colspan="2">GST 10%</td>
      <td id="tax"></td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td colspan="2">GRAND TOTAL</td>
      <td id="grand-total"></td>
    </tr>
  </tfoot>
</table>
<div id="thanks">Thank you!</div>
<div id="notices">
  <div>NOTICE:</div>
  <div class="notice">Please pay the price at the bus stop</div>
</div>
</main>


 </div>
 <div>

  <button id="down" onclick="download()"> Download Your Ticket</button>
 </div>
</body>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>


<script>
 function download() {

var doc = new jsPDF();
var ticket = document.getElementById("main-ticket")
doc.fromHTML(ticket, 15,15);
doc.save("ticket.pdf");
}
</script>

我已经完成了这段代码，它只保存了一张空白表，html 由我添加了一些样式的样式标签组成

标签： javascript

解决方案

尝试这个。我已经更新了代码。它应该工作。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    </head>
    <body id="main-ticket">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus minima minus sint, perspiciatis maiores fugit sit aperiam modi, nihil molestiae natus repellendus odit harum amet veniam. Officia incidunt perferendis vero impedit ullam deleniti facilis dolorum! Incidunt excepturi harum minima eos accusamus, iure aut mollitia commodi, hic culpa blanditiis optio fugiat quia voluptates suscipit placeat recusandae? Perferendis nobis autem ex dolor velit, quo explicabo, reiciendis facere tempora aperiam temporibus laborum dolorum dignissimos in delectus culpa aliquid error vitae suscipit. Accusamus, assumenda dolore voluptatibus officia provident qui dolorem ab fuga. Obcaecati, molestias placeat neque cum perspiciatis repellendus sequi earum. Velit, totam quae.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus minima minus sint, perspiciatis maiores fugit sit aperiam modi, nihil molestiae natus repellendus odit harum amet veniam. Officia incidunt perferendis vero impedit ullam deleniti facilis dolorum! Incidunt excepturi harum minima eos accusamus, iure aut mollitia commodi, hic culpa blanditiis optio fugiat quia voluptates suscipit placeat recusandae? Perferendis nobis autem ex dolor velit, quo explicabo, reiciendis facere tempora aperiam temporibus laborum dolorum dignissimos in delectus culpa aliquid error vitae suscipit. Accusamus, assumenda dolore voluptatibus officia provident qui dolorem ab fuga. Obcaecati, molestias placeat neque cum perspiciatis repellendus sequi earum. Velit, totam quae.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus minima minus sint, perspiciatis maiores fugit sit aperiam modi, nihil molestiae natus repellendus odit harum amet veniam. Officia incidunt perferendis vero impedit ullam deleniti facilis dolorum! Incidunt excepturi harum minima eos accusamus, iure aut mollitia commodi, hic culpa blanditiis optio fugiat quia voluptates suscipit placeat recusandae? Perferendis nobis autem ex dolor velit, quo explicabo, reiciendis facere tempora aperiam temporibus laborum dolorum dignissimos in delectus culpa aliquid error vitae suscipit. Accusamus, assumenda dolore voluptatibus officia provident qui dolorem ab fuga. Obcaecati, molestias placeat neque cum perspiciatis repellendus sequi earum. Velit, totam quae.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus minima minus sint, perspiciatis maiores fugit sit aperiam modi, nihil molestiae natus repellendus odit harum amet veniam. Officia incidunt perferendis vero impedit ullam deleniti facilis dolorum! Incidunt excepturi harum minima eos accusamus, iure aut mollitia commodi, hic culpa blanditiis optio fugiat quia voluptates suscipit placeat recusandae? Perferendis nobis autem ex dolor velit, quo explicabo, reiciendis facere tempora aperiam temporibus laborum dolorum dignissimos in delectus culpa aliquid error vitae suscipit. Accusamus, assumenda dolore voluptatibus officia provident qui dolorem ab fuga. Obcaecati, molestias placeat neque cum perspiciatis repellendus sequi earum. Velit, totam quae.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus minima minus sint, perspiciatis maiores fugit sit aperiam modi, nihil molestiae natus repellendus odit harum amet veniam. Officia incidunt perferendis vero impedit ullam deleniti facilis dolorum! Incidunt excepturi harum minima eos accusamus, iure aut mollitia commodi, hic culpa blanditiis optio fugiat quia voluptates suscipit placeat recusandae? Perferendis nobis autem ex dolor velit, quo explicabo, reiciendis facere tempora aperiam temporibus laborum dolorum dignissimos in delectus culpa aliquid error vitae suscipit. Accusamus, assumenda dolore voluptatibus officia provident qui dolorem ab fuga. Obcaecati, molestias placeat neque cum perspiciatis repellendus sequi earum. Velit, totam quae.</p>
        <button id="down">Save</button>

    <script>
        $(document).ready(function() {
        var specialElementHandler = {
              "#main-ticket":function(element, renderer) {
                return true;
              }
            };

            $("#down").click(function() {
              var doc = new jsPDF();

              doc.fromHTML($("#main-ticket").html(), 15,15,{
                "width":170,
                "elementHandlers":specialElementHandler
              })
              doc.save("Ticket.pdf")
            })



          });
    </script>
    </body>
</html>

推荐阅读