Hướng dẫn jspdf html example - ví dụ jspdf html

Question

JSPDF có thể sử dụng các plugin. Để cho phép nó in HTML, bạn phải bao gồm một số plugin nhất định và do đó phải làm như sau: In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:

Nội dung chính Show

Về ví dụ JSPDF này
HTML đến PDF Tệp ví dụ
Tạo UI để tải lên nguồn HTML
Chức năng JSPDF để tạo PDF trong JavaScript
Ảnh chụp màn hình đầu ra để tải lên tệp HTML
Sự kết luận
Làm cách nào để xuất HTML sang PDF?
Làm thế nào để tải xuống trang HTML dưới dạng PDF bằng cách sử dụng jQuery?
Làm cách nào để xuất nội dung div dưới dạng pdf?

Nội phân chính

Các công cụ hiện có để tạo PDF
Về ví dụ JSPDF này
HTML đến PDF Tệp ví dụ
Tạo UI để tải lên nguồn HTML
Chức năng JSPDF để tạo PDF trong JavaScript
Ảnh chụp màn hình đầu ra để tải lên tệp HTML
Làm cách nào để xuất HTML sang PDF?
Làm thế nào để tải xuống trang HTML dưới dạng PDF bằng cách sử dụng jQuery?
Làm cách nào để xuất nội dung div dưới dạng pdf?

Truy cập https://github.com/mrrio/jspdf và tải xuống phiên bản mới nhất.
Bao gồm các tập lệnh sau trong dự án của bạn:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js

Nếu bạn muốn bỏ qua các yếu tố nhất định, bạn phải đánh dấu chúng bằng một ID, sau đó bạn có thể bỏ qua trong một trình xử lý phần tử đặc biệt của JSPDF. Do đó, HTML của bạn sẽ trông như thế này:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

Sau đó, bạn sử dụng mã JavaScript sau để mở PDF đã tạo trong một cửa sổ bật lên:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Đối với tôi, điều này đã tạo ra một pdf đẹp và gọn gàng chỉ bao gồm dòng 'in cái này thành pdf'.

Xin lưu ý rằng trình xử lý phần tử đặc biệt chỉ xử lý ID trong phiên bản hiện tại, cũng được nêu trong một vấn đề GitHub. Nó nói:

Bởi vì sự phù hợp được thực hiện với mọi yếu tố trong cây nút, mong muốn của tôi là làm cho nó nhanh nhất có thể. Trong trường hợp đó, điều đó có nghĩa là "chỉ ID phần tử được khớp" ID phần tử vẫn được thực hiện theo kiểu jQuery "#ID", nhưng điều đó không có nghĩa là tất cả các bộ chọn jQuery đều được hỗ trợ.

Do đó, thay thế '#ignorepdf' bằng các bộ chọn lớp như '.ignorepdf' không hoạt động với tôi. Thay vào đó, bạn sẽ phải thêm cùng một trình xử lý cho từng yếu tố mà bạn muốn bỏ qua như:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

Từ các ví dụ, người ta cũng được tuyên bố rằng có thể chọn các thẻ như 'A' hoặc 'li'. Đó có thể là một chút để không giới hạn cho hầu hết các cơ sở sử dụng:

Chúng tôi hỗ trợ trình xử lý yếu tố đặc biệt. Đăng ký chúng với bộ chọn ID kiểu jQuery cho tên ID hoặc nút. .

Một điều rất quan trọng cần thêm là bạn mất tất cả thông tin phong cách (CSS). May mắn thay, JSPDF có thể định dạng độc đáo H2, H2, H3, v.v., đủ cho mục đích của tôi. Ngoài ra, nó sẽ chỉ in văn bản trong các nút văn bản, điều đó có nghĩa là nó sẽ không in các giá trị của TextAreas và tương tự. Thí dụ:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

bởi Vincy. Sửa đổi lần cuối vào ngày 22 tháng 8 năm 2022.

HTML đến PDF trong JavaScript dễ dàng hơn so với việc triển khai phía máy chủ để tạo PDF.

Tạo PDF là một trong những tính năng quan trọng nhất trong việc xây dựng các trang web. Tạo PDF từ định dạng HTML sẽ hữu ích ở nhiều nơi trong khi xây dựng một trang web để tạo báo cáo.

Đây là một số công cụ tạo PDF mà tôi đã xây dựng cho khách hàng của mình trong khi cung cấp dịch vụ tự do.

Công cụ đánh giá khách hàng - Báo cáo kế hoạch thuốc
Công cụ đánh giá bán hàng - API qua Báo cáo bán hàng của Amazon
Công cụ quản lý vật liệu - Báo cáo chứng khoán

Các công cụ này chuyển đổi các mẫu HTML hoặc dữ liệu động được hỗ trợ cơ sở dữ liệu thành PDF và cung cấp tải xuống.

Khi thêm một tính năng để thực hiện chuyển đổi HTML sang PDF, sẽ linh hoạt để có được nguồn dưới mọi hình thức. Các hình thức khác nhau của các nguồn HTML cho quá trình tạo PDF có thể,

Chuỗi HTML
Đối tượng HTML có tham chiếu chọn
Tệp HTML

Thư viện JSPDF JavaScript hỗ trợ các hình thức đầu vào khác nhau để tạo PDF. Ví dụ, nó sử dụng phụ thuộc của Dom Domify để thực hiện chuyển đổi HTML sang PDF.“dompurify” dependency to implement HTML to PDF conversion.

JSPDF là thư viện JavaScript tốt nhất để tạo các tệp PDF ở phía máy khách. & NBSP; Chúng tôi đã thấy ví dụ JSPDF đã để chuyển đổi các nguồn HTML thành PDF. Bài viết này sẽ tạo ra một ví dụ để lấy tệp HTML để tạo PDF trong JavaScript.

Có một số công cụ phổ biến tồn tại trực tuyến để xử lý chuyển đổi HTML sang PDF. Bạn có thể tìm thấy các độc giả và bộ chuyển đổi PDF tốt nhất trong bài viết được liên kết.

DOMPDF là thư viện chuyển đổi HTML sang PDF để chuyển đổi các tệp HTML thành PDF. Nó cũng chấp nhận đánh dấu HTML được nhập thủ công. Tải xuống DOMPDF từ GitHub để cài đặt nó vào một ứng dụng.

Về ví dụ JSPDF này

Ví dụ này chỉ đơn giản là chuyển đổi HTML thành PDF trong JavaScript với một vài dòng mã.

Nó sử dụng thư viện JSPDF để xây dựng một công cụ máy phát PDF tùy chỉnh ở phía máy khách.

Chúng tôi đã thấy một số ví dụ JSPDF về việc chuyển đổi HTML thành PDF. & NBSP; Nếu bạn muốn một ví dụ về việc tạo PDF nhiều trang từ một tài liệu HTML dài.

Ví dụ này cho phép người dùng duyệt tệp HTML đầu vào. Trang đích hiển thị giao diện người dùng biểu mẫu với trường đầu vào tệp để chọn tệp HTML nguồn.

Nó bao gồm 2 bước để đạt được thế hệ HTML đến PDF trong JavaScript.

Bước 1: Đọc dữ liệu HTML và hiển thị xem trước trong UI.
Bước 2: Tạo PDF và cung cấp tùy chọn để tải xuống tệp đầu ra.

Nó xử lý xác thực JavaScript và hạn chế loại tệp trước khi bắt đầu tạo PDF. Nó chứa JavaScript để nhập và khởi tạo JSPDF. Nó sử dụng phụ thuộc HTMLTocanvas để chuyển đổi nội dung tệp HTML được tải lên thành PDF.

HTML đến PDF Tệp ví dụ

Hình ảnh dưới đây hiển thị cấu trúc tệp của ví dụ tạo HTML đến PDF này.

Nó chứa một mẫu HTML mẫu trong thư mục & nbsp; mẫu. Bạn có thể sử dụng mẫu để kiểm tra tập lệnh ví dụ này.

Tệp index.php có UI biểu mẫu HTML để duyệt tài nguyên tệp .html .html.

Nó xử lý việc tạo PDF hai bước với tệp Convert.js. Nó đọc tệp HTML và gửi nội dung đến chức năng thư viện phụ thuộc JSPDF. Nó sử dụng nội dung HTML để tạo PDF đầu ra.

& Nbsp; node_modules chứa tất cả các phụ thuộc cần thiết của thư viện JSPDF. Bằng cách chạy lệnh npm thích hợp, nó tạo ra node_modules.

npm install jspdf --save

Tạo UI để tải lên nguồn HTML

Thêm tập lệnh này để hiển thị một biểu mẫu để chọn nguồn của thao tác phụ trợ HTML vào PDF. Nó chứa một nút gửi gọi JavaScript để đọc nội dung HTML được tải lên.

Nó có một thùng chứa mục tiêu để hiển thị bản xem trước của nội dung tệp được tải lên. Trong màn hình xem trước, giao diện người dùng chứa nút Gener Generate để tải xuống tệp PDF đầu ra vào trình duyệt.

index.php

<HTML>
<HEAD>
<TITLE>Convert HTML file to PDF</TITLE>
<link href="./assets/css/style.css" type="text/css" rel="stylesheet" />
<script src="./vendor/jquery/jquery-3.2.1.min.js"></script>
</HEAD>
<BODY>
    <div id="container">
        <h2>Convert HTML file to PDF</h2>
        <form name="foo" method="post" class="input-form"
            enctype="multipart/form-data">
            <div class="row">
                <label class="form-label">Upload HTML file: </label> <input
                    type="file" id="fileUpload" name="file"
                    class="input-file" accept=".html,.htm">
            </div>
            <div class="preview">
                <div id="temp-target"></div>
            </div>
            <div class="row">
                <input type="button" value="Show Preview"
                    class="btn-preview" onclick="readHTML()"><span
                    id="error-message" class="error"></span> 
                
                <input
                    type="button" value="Create PDF"
                    class="btn-generate" onclick="converHTMLFileToPDF()">
            </div>

        </form>
    </div>
    <script src="./node_modules/jspdf/dist/jspdf.umd.min.js"></script>
    <script type="text/javascript"
        src="./node_modules/html2canvas/dist/html2canvas.js"></script>
    <script src="assets/js/convert.js"></script>
</BODY>
</HTML>

Đây là một mẫu HTML mẫu được tạo cho ví dụ PDF JavaScript này. Bạn có thể chọn bất kỳ tệp HTML ví dụ nào từ máy tính của bạn.

Điều này sẽ tiết kiệm nỗ lực của bạn trong việc tạo một nguồn cho thử nghiệm ban đầu của mã tạo HTML cho PDF.

Template/html-template.html

<div class="event-detail">
	<h2>Thank you for registering with us.</h2>
	<h2>This is the acknowledgement of your registeration for attending the
		event.</h2>
	<p class="row">
		Event Name:<br />Machine learning introduction for kids
	</p>
	<p class="row">
		Event Date:<br />27 May 2021
	</p>
	<p class="row">
		Time:<br />10:30 AM
	</p>
	<p class="row">
		Venue:<br />AMC Graduate Center,<br>25, AMC Street,<br>New York, USA.
	</p>
	<p class="pdf-content">
		Contact our <a href="#">Organizers' Team</a> if you need any support.
	</p>
</div>

Tôi đã sử dụng CSS đơn giản để thiết kế mẫu nguồn. Nó giúp hình thành biên lai đăng ký sự kiện trong HTML.

assets/css/style.css

#container {
    -webkit-font-smoothing: antialiased;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: .9em;
    color: #1e2a28;
    width: 740px;
    margin: 0 auto;
    padding: 12px 12px 0px 36px;
}

.input-form {
    background: #ffffff;
    padding: 10px 25px;
    border-radius: 3px;
    text-align: left;
    border: #ccc 1px solid;
}

.row {
    margin: 18px 0;
}

.input-file {
    border-radius: 3px;
    border: #a6a6a6 1px solid;
    padding: 10px;
    margin-bottom: 10px;
}

.btn-preview {
    padding: 10px 30px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #36de5c;
    border: #27a544 1px solid;
}

.btn-generate {
    padding: 10px 30px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #36de5c;
    border: #27a544 1px solid;
    display: none;
}

.preview {
    display: none;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgb(32 33 36/ 28%);
    border-color: rgba(223, 225, 229, 0);
}

.heading {
    text-align: center;
}

.form-label {
    display: block;
    margin-bottom: 5px;
}

.error {
    color: #ee0000;
    margin-left: 10px;
}

Chức năng JSPDF để tạo PDF trong JavaScript

Trong JavaScript, chuyển đổi PDF được triển khai theo hai bước. Đầu tiên, nó đọc nội dung tệp và hiển thị bản xem trước trong UI. Sau đó, nó nhận được nội dung xem trước và tạo PDF trong JavaScript.

Tệp & nbsp; convert.js thực hiện điều này bằng cách sử dụng hai hàm readhtml () và hội tụThtMlTopDf ().

ReadHtml () nhận đường dẫn tạm thời được tải lên và đọc nội dung bằng filereader (). Nó tải bản xem trước vào mục tiêu được chỉ định. Bước này giúp người dùng đảm bảo về nội dung trước khi gọi chuyển đổi PDF của JavaScript.

ConvertthtMlFILETOPDF () nhập thư viện JSPDF và khởi tạo nó. Nó gọi .html () phụ thuộc vào htmltocanvas. Nó chuyển đổi trang xem trước HTML thành định dạng PDF từ nó.

Sau đó, cuối cùng, phương thức .save () trong lời nhắc gọi lại để tải xuống tài liệu PDF đã tạo.

assets/js/convert.js

function readHTML() {
	// get the HTML source file path
	var path = document.getElementById("fileUpload").files[0];
	var contents;
	$("#error-message").html("");
	$("#fileUpload").css("border", "#a6a6a6 1px solid");
	if ($(path).length != 0) {
		var r = new FileReader();
		r.onload = function(e) {
			// read HTML file content
			contents = e.target.result;
			// show JavaScript PDF preview
			$(".preview").show();
			$("#temp-target").html(contents);
			
			$(".btn-preview").hide();
			$(".btn-generate").show();
		}
		r.readAsText(path);
	} else {
		$("#error-message").html("required.").show();
		$("#fileUpload").css("border", "#d96557 1px solid");
	}
}

function converHTMLFileToPDF() {
	const { jsPDF } = window.jspdf;
	var doc = new jsPDF('l', 'mm', [1200, 1210]);

	var pdfjs = document.querySelector('#temp-target');

	// Convert HTML to PDF in JavaScript
	doc.html(pdfjs, {
		callback: function(doc) {
			doc.save("output.pdf");
		},
		x: 10,
		y: 10
	});
}

Ảnh chụp màn hình đầu ra để tải lên tệp HTML

Ảnh chụp màn hình này hiển thị Frontend UI với tùy chọn Tải lên tệp. Nó hiển thị một bản xem trước mẫu của HTML đã tải lên.

Nút tạo ra PDF PDF trong hình ảnh dưới đây ban đầu được ẩn. Sau đó, trên bản xem trước, tập lệnh sẽ bật nó.

Sự kiện trên nhấp chuột của Nút tạo PDF sẽ kích hoạt chuyển đổi HTML sang PDF để lưu tệp .pdf.

Sự kết luận

Tập lệnh ví dụ được tạo trong bài viết này giải thích mức độ dễ dàng của việc thực hiện tạo HTML thành PDF trong JavaScript bằng JSPDF.

Chúng tôi đã thấy các loại có thể có các nguồn HTML đầu vào cho quy trình tạo PDF.

JSPDF là thư viện phù hợp tốt nhất để triển khai công cụ tạo HTML đến PDF.

Ví dụ JSPDF này có sự phân tách rõ ràng về việc đọc nội dung nguồn và tạo HTML thành PDF trong JavaScript. Bước trình chiếu triển lãm có thể giúp có một cái nhìn thoáng qua trước khi tải xuống PDF. Bạn tải xuống tập lệnh ví dụ dưới đây.

Tải xuống

Trở lại đầu

Làm cách nào để xuất HTML sang PDF?

Cách chuyển đổi các trang HTML thành các tệp PDF:..

Trên máy tính Windows, hãy mở một trang web HTML trong Internet Explorer, Google Chrome hoặc Firefox. ....

Nhấp vào nút Chuyển đổi thành PDF trong thanh công cụ Adobe PDF để khởi động chuyển đổi PDF ..

Nhập tên tệp và lưu tệp PDF mới của bạn vào một vị trí mong muốn ..

Làm thế nào để tải xuống trang HTML dưới dạng PDF bằng cách sử dụng jQuery?

Giải thích: Nút xuất đã được chỉ định một trình xử lý sự kiện nhấp chuột jQuery. Khi nhấp vào nút Xuất, bảng HTML được chuyển đổi thành Canvas HTML5 bằng plugin HTML2Canvas và sau đó Canvas HTML5 sẽ được xuất sang PDF bằng plugin PDFMake.