Hướng dẫn generate pdf on button click in php - tạo pdf khi nhấp vào nút trong php

Mã được đưa ra .. Tôi muốn tạo PDF với nội dung, những gì tôi đã nhập vào trường văn bản

Name

Nhưng kết quả là ...

Lỗi FPDF: Một số dữ liệu đã được xuất, không thể gửi tệp PDF ai đó làm ơn trợ giúp Somebody plz help

hjpotter92

76.7K34 Huy hiệu vàng139 Huy hiệu bạc177 Huy hiệu đồng34 gold badges139 silver badges177 bronze badges

Đã hỏi ngày 7 tháng 2 năm 2014 lúc 6:28Feb 7, 2014 at 6:28

0

Chỉ xuất ra

    Name
        
        
    

    Name
        
        
    

Đã trả lời ngày 7 tháng 2 năm 2014 lúc 6:33Feb 7, 2014 at 6:33

hjpotter92hjpotter92hjpotter92

76.7K34 Huy hiệu vàng139 Huy hiệu bạc177 Huy hiệu đồng34 gold badges139 silver badges177 bronze badges

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

Tạo PDF từ HTML trong trình duyệt là một trong những tiện ích được mong muốn nhất. Có nhiều giải pháp được lưu trữ tạo PDF trực tuyến từ nguồn được đăng.

Khi sử dụng các công cụ trực tuyến, các tính năng cần thiết không có sẵn với một công cụ. Người dùng phải thỏa hiệp một số nhu cầu của họ khi phụ thuộc vào các công cụ trực tuyến.

Nhưng, các nhà phát triển như chúng tôi không cần phải thỏa hiệp. Chúng ta có thể tạo một tiện ích tùy chỉnh để tự tạo PDF từ HTML.

Giải pháp nhanh chóng

Có một giải pháp nhanh chóng để tạo PDF từ trang HTML. Trình hướng dẫn in của trình duyệt có tùy chọn Save Save dưới dạng PDF cùng với bảng xem trước.

JavaScript này kích hoạt hành động in của trình duyệt. Sau đó, nó cung cấp một phần cụ thể của HTM để in.

	

		
PDF Page Title
		
		

			How to generate a pdf from the UI content is easy.
		
		

			This describes how to generate pdf from HTML using
			programming.
		
	
	
	Generate PDF

	


	var buttonElement = document.querySelector["#btn-generate"];
	buttonElement.addEventListener['click', function[] {
		var pdfContent = document.getElementById["pdf-content"].innerHTML;
		var windowObject = window.open[];

		windowObject.document.write[pdfContent];

		windowObject.print[];
		windowObject.close[];
	}];

Tôi chắc chắn rằng điều này không đủ để tuyên bố rằng thế hệ PDF được triển khai :-]

Để tạo một giải pháp chính thức để tạo PDF từ HTML, chúng tôi phải sử dụng các thư viện.

Có các thư viện phổ biến có sẵn trên thị trường để xây dựng một công cụ thế hệ PDF cho một ứng dụng.

Trong hướng dẫn này, chúng tôi sẽ thấy một số thư viện hàng đầu hỗ trợ thế hệ PDF. Đối với mỗi thư viện, chúng ta sẽ thấy các bước hướng dẫn và phát triển hướng dẫn.

Thư viện có sẵn để tạo PDF từ HTML

Phần này đã liệt kê các thư viện được sử dụng để tạo PDF từ HTML trong bài viết này. Nó liên kết các mã ví dụ thích hợp dưới đây để đưa bạn vào đúng nơi.

1. HTML đến PDF
2. JSPDF
3. WKHTMLTOPDF
4. PDFMAKE

Các phần HTML đến PDF và JSPDF có nhiều hơn một ví dụ. Đó là để biết cách tạo PDF từ HTML chứa các nút hoặc container phức tạp. Ví dụ: Bảng HTML, phòng trưng bày hình ảnh, v.v.

1. HTML đến PDF

Phương thức thư viện HTML đến PDF là một cách để tạo PDF từ HTML. Đây là một quá trình hai bước để có được đầu ra PDF tiêu chuẩn.

Đầu tiên, lấy URL CDN của thư viện này từ một nguồn xác thực. & NBSP; Sau đó, làm theo hai bước này để có được một tệp PDF đầu ra.

1. HTML khởi tạo đến lớp thư viện PDF.
2. Bản đồ nội dung HTML để tạo và lưu pdf.

Vòng đời cơ bản để tạo PDF từ HTML bằng thư viện này được hiển thị trong biểu đồ dòng dưới đây.

Ví dụ 1: Tạo PDF từ HTML chỉ chứa văn bản.

Generate PDF from HTML using html to pdf library





	

	
		var buttonElement = document.querySelector["#btn-generate"];
		buttonElement.addEventListener['click', function[] {
			var pdfContent = document.querySelector["#pdf-content"];
			html2pdf[].from[pdfContent].save[];
		}];
	

Ví dụ 2: Tùy chọn thư viện cung cấp để ghi đè mặc định

Không giống như ví dụ trên, nó gửi một loạt các tùy chọn để tạo PDF từ HTML. Nó ghi đè tên tệp mặc định, lề, định hướng và nhiều mặc định hơn theo quy định.

var pdfContent = document.querySelector["#pdf-content"];
var optionArray = {
  margin:       10,
  filename:     'output.pdf',
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

// html to pdf generation with the reference of PDF worker object
html2pdf[].set[optionArray].from[pdfContent].save[];

Trong phương thức nguyên khối cũ, HTML2PDF [] chấp nhận tham chiếu và tùy chọn HTML. Để tạo PDF từ các tùy chọn đối tượng HTML DOM và các tùy chọn JSON được cung cấp như,

html2pdf[pdfContent, optionArray];

2. JSPDF

Để tạo PDF từ HTML, một số thư viện cần định nghĩa tài liệu về đánh dấu. JSPDF được biết đến phổ biến với tính năng nhận đầu vào HTML ở bất kỳ định dạng nào.

Ví dụ, nó có khả năng chấp nhận HTML trong các định dạng sau.

1. Đánh dấu HTML.
2. Dữ liệu đầu vào tệp HTML.
3. Đối tượng phần tử HTML với tham chiếu của bộ chọn.

Ví dụ 1: Giải pháp thay thế tương đương để tạo PDF từ HTML

Ví dụ này tạo ra một tham chiếu sử dụng cơ bản của JSPDF để tạo PDF từ mẫu HTML. & NBSP; Nó bao gồm một nguồn mẫu bên ngoài trong thùng chứa UI.

JavaScript ánh xạ một trình xử lý sự kiện vào nút tạo PDF PDF được tìm thấy trong mẫu HTML.

Khi nhấp vào nút, tập lệnh bắt đầu JSPDF với đặc tả PDF thích hợp. Nó sử dụng .html [] Xử lý thư viện JSPDF TP tạo PDF từ đối tượng HTML được cung cấp dưới dạng đối số.

Trình xử lý này xác định chức năng gọi lại thực thi chuyển đổi HTML sang PDF. Nó lưu hoặc mở tài liệu PDF được tạo trong cuộc gọi lại.

Kịch bản này sử dụng URL CDN JSPDF. Nếu bạn muốn tải xuống JSPDF này, tài liệu chính thức chứa lệnh NPM để cài đặt thư viện này.

jsPDF Example





	

	
		var buttonElement = document.querySelector["#btn-generate"];
		buttonElement.addEventListener['click', function[] {
			const { jsPDF } = window.jspdf;
			var doc = new jsPDF["p", "pt", 'a4'];
			var pdfContent = document.querySelector["#pdf-content"];

			// Generate PDF from HTML using right id-selector
			doc.html[pdfContent, {
				callback: function[doc] {
				doc.save["download.pdf"];
				},
				x: 10,
				y: 19
			}];
		}];
	

Ví dụ 2: Tạo pdf nhân từ từ trang HTML

Thư viện JSPDF là một trong những thư viện tốt nhất được sử dụng để tạo PDF từ HTML ở phía máy khách. Chúng tôi đã thấy nhiều ví dụ hơn trong các bài viết trước.

Ví dụ này là để tạo một tài liệu nhân từ định dạng HTML dài đến PDF.

Nó sử dụng các trình xử lý trang JSPDF, như AddPage, SetPage, InsertPage và nhiều hơn nữa.

Nó tính toán chiều cao và chiều rộng nội dung trang PDF và phân chia nội dung nguồn HTML. Nó tạo ra các phần nội dung trang từ đánh dấu HTML.

Nó tính toán tổng số trang để phân chia các đoạn chia của HTML thành tài liệu nhiều trang PDF. AddPage [] & nbsp; tạo một thể hiện trang để hiển thị chunk nội dung trang vào nó.

Nó lặp qua cùng một quy trình để tạo PDF từ HTML chứa nội dung dài.

Generate multi-page PDF from HTML - jsPDF




.description {
    font-size: 2em;
    line-height: 4;
}



	

		


			
			
Donec id leo quis felis vehicula bibendum sit amet ut tellus. Sed
	sagittis aliquet rhoncus. Pellentesque vulputate nunc ultricies,
	egestas augue ac, ullamcorper dui. Etiam diam mauris, molestie in purus
	a, venenatis pretium leo. Sed id metus eleifend, scelerisque neque id,
	posuere arcu. Nunc cursus et dui quis fringilla. In in turpis feugiat
	diam porttitor tempus. In hendrerit diam dolor, id pellentesque ante
	volutpat a. Nam tortor sapien, semper ut justo et, accumsan imperdiet
	sem. Sed euismod nunc vitae dolor porttitor ullamcorper. Donec sed
	lacinia dui. Nunc sed suscipit erat. Phasellus euismod ultrices velit,
	hendrerit tempor diam elementum ut.
	
			
		

		Generate PDF
	



$[document].ready[function[]{
	$["#btn-generate"].click[function[]{
		var htmlWidth = $["#pdf-content"].width[];
		var htmlHeight = $["#pdf-content"].height[];
		var pdfWidth = htmlWidth + [15 * 2];
		var pdfHeight = [pdfWidth * 1.5] + [15 * 2];
		
		var doc = new jsPDF['p', 'pt', [pdfWidth, pdfHeight]];
	
		var pageCount = Math.ceil[htmlHeight / pdfHeight] - 1;
	
	
		html2canvas[$["#pdf-content"][0], { allowTaint: true }].then[function[canvas] {
			canvas.getContext['2d'];
	
			var image = canvas.toDataURL["image/png", 1.0];
			doc.addImage[image, 'PNG', 15, 15, htmlWidth, htmlHeight];
	
	
			for [var i = 1; i 

Ví dụ sử dụng đơn giản này có thể bắt đầu để bắt đầu với thư viện PHP này để tạo PDF từ HTML.

    Name
        
        
    

4. PDFMAKE

Thư viện PDFMake có cả tích hợp phía máy khách và phía máy chủ. Cả hai phương thức đều tạo PDF từ HTML bằng cách truy cập nội dung phần tử từ JavaScript.

Cài đặt

Ví dụ này sử dụng url pdfmake cdn để nhập các phụ thuộc. Tài liệu có các phương pháp cài đặt và tích hợp thư viện thay thế.

Ví dụ: nó cung cấp cho các lệnh & nbsp; npm để tải xuống node_modules với các phụ thuộc cần thiết.

Tích hợp phía khách hàng

Ví dụ này sử dụng phương thức phía máy khách PDFMake, để tạo PDF từ các đối tượng HTML.

Nó truy cập vào nội dung phần tử HTML từ JavaScript và chuẩn bị đối tượng định nghĩa tài liệu.

Định nghĩa tài liệu có thể cung cấp các loại nội dung sau.

1. Text,
2. Văn bản nhiều cột,
3. Styles,
4. Hình ảnh

HTML chứa nội dung tiêu đề, văn bản và hình ảnh. Đối tượng DocDefinition được xây dựng với nội dung của các phần tử HTML này.

Hình ảnh sẽ được cung cấp dưới dạng dữ liệu nhị phân được mã hóa. Trong ví dụ này, JavaScript

    Name
        
        
    

Sau đó, mã xử lý pdfmake.CreatePdf [] tạo PDF từ HTML. Mã dưới đây mở đầu ra HTML đến PDF trong màn hình trình duyệt. Thư viện PDFMake cũng cho phép in và tải xuống tài liệu PDF.

    Name
        
        
    

Sự kết luận

Do đó, chúng tôi đã thấy các phương thức khác nhau để tạo PDF từ mã nguồn HTML hoặc các tệp. Tôi hy vọng các ví dụ sử dụng của các thư viện có thể đưa ra các lựa chọn để cho phép tạo PDF.

Chia sẻ suy nghĩ của bạn về khái niệm thế hệ PDF mà chúng tôi đã thấy. Ngoài ra, hãy chia sẻ nhận xét của bạn trên các mã ví dụ để tạo PDF từ HTML.

Trở lại đầu

Làm thế nào để thêm nút PDF trong PHP?

Làm thế nào để tạo tệp PDF bằng PHP?

Làm thế nào để tải xuống PDF từ URL trong PHP?