堆栈内存溢出
  繁体   English   中英

如何使用 javascript 将 html 文件转换为 pdf，其中包括 ZC7A628CBA22E28EB17B5F5C6AE2A266 AZ 样式

[英]How to convert html file to pdf using javascript which include css in style tag

 原文  2020-05-09 04:47:55  4   2    javascript

问题描述

How i can convert html file to pdf anybody please help me and that page which contain a button on clicking the button the pdf will be saved to the client comouter and in pdf there is no image of the button

  <!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 包含我添加了一些 styles 的样式标签

2 个解决方案

解决方案1
 0  2020-05-09 04:50:01

听起来你可以使用jsPDF

解决方案2
 0  2020-05-09 05:31:14

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

<!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Python将HTML / CSS / Javascript文件转换为PDF？ 如何使用Javascript将HTML / CSS转换为PDF？ 如何独立于JavaScript Bowser将HTML（CSS）转换为PDF JavaScript-在不使用CSS文件和样式标签的情况下获取HTML文件中元素的大小？ 是否可以将CSS样式标签转换为javascript对象？ 如何使用 javascript 将 html 页面转换为 pdf 使用脚本标记通过CSS文件将JavaScript包含在程序中？ 使用Java或JavaScript将HTML页面和CSS转换为PDF 如何用JavaScript替换标签html表中的样式以导出到CSV文件 如何使用Javascript包含/插入HTML文件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM