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

Tôi đang sử dụng jspdf.debug.js để xuất dữ liệu khác nhau từ một trang web nhưng có một vài vấn đề, tôi không thể khiến nó hiển thị CSS trong PDF đã xuất và nếu tôi có hình ảnh trong trang tôi đang xuất, PDF trả về trống ...

Nội phân Chính showShow

• 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 để chuyển đổi HTML CSS thành PDF?
• Làm cách nào để tạo PDF từ HTML?
• JVaScript JSPDF là gì?

Có ai biết cách khắc phục điều này không?

Đây là một jsfiddle cho thấy nó không hiển thị CSS

Và kịch bản của tôi

$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'financiar_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $('.export').get(0) // HTML element
        , 25  // x coord
        , 25  // y coord
        , {
              'width': 550 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
})
});

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.

1. Công cụ đánh giá khách hàng - Báo cáo kế hoạch thuốc
2. Công cụ đánh giá bán hàng - API qua Báo cáo bán hàng của Amazon
3. 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ể,

1. Chuỗi HTML
2. Đối tượng HTML có tham chiếu chọn
3. 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

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 để chuyển đổi HTML CSS thành PDF?

1. Làm cách nào để tạo PDF từ HTML?
2. JVaScript JSPDF là gì?

Có ai biết cách khắc phục điều này không?

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 để chuyển đổi HTML CSS thành PDF?

Làm cách nào để tạo PDF từ HTML?

npm install jspdf --save

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

index.php

    

        
Convert HTML file to PDF
        

            

                Upload HTML file:  
            
            

                

            
            

                 
                
                
            

        
    
    
    
    

Làm cách nào để chuyển đổi HTML CSS thành PDF?

Làm cách nào để tạo PDF từ HTML?

Template/html-template.html

	
Thank you for registering with us.
	
This is the acknowledgement of your registeration for attending the
		event.
	

		Event Name:
Machine learning introduction for kids
	
	

		Event Date:
27 May 2021
	
	

		Time:
10:30 AM
	
	

		Venue:
AMC Graduate Center,
25, AMC Street,
New York, USA.
	
	

		Contact our Organizers' Team if you need any support.
	

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.

Tài sản/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 để chuyển đổi HTML CSS thành 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 cách nào để tạo PDF từ HTML?

Ví dụ 2: Sử dụng thư viện JSPDF bao gồm liên kết CDN đến JSPDF trong thẻ HTML để nhập thư viện. Bây giờ chúng ta có thể sử dụng thư viện trên để sử dụng các chức năng của nó. Chúng tôi sẽ sử dụng phương thức FromHTML để tạo PDF từ HTML. Lưu tệp bằng hàm Save () sau khi tệp được tạo.

JVaScript JSPDF là gì?

JSPDF là một thư viện nguồn mở để tạo tài liệu PDF bằng JavaScript. Nó cung cấp nhiều tùy chọn để tạo các tệp PDF, với các thuộc tính tùy chỉnh. Nó có rất nhiều plugin để hỗ trợ nhiều cách khác nhau của thế hệ PDF.an open-source library for generating PDF documents using JavaScript. It provides multiple options to generate PDF files, with custom properties. It has numerous plugins to support various ways of PDF generation.