Html, css pdf

Việc tạo định dạng tệp PDF trong JavaScript phía máy khách giờ đây trở nên đơn giản với một thư viện tuyệt vời mà chúng tôi có thể đã nghe nói đến

Thư viện cho phép bạn chọn các phần tử DOM (Mô hình đối tượng tài liệu) mà bạn muốn xuất bản dưới dạng nội dung PDF

Xuất HTML/CSS chung sang PDF đã là một câu hỏi mở mà không có câu trả lời dứt khoát trong một thời gian dài

Chúng tôi đã vật lộn với nhiều cách tiếp cận khác nhau và nói chung, tất cả chúng đều có nhược điểm. Tôi có nghiên cứu cụ thể về việc sử dụng thư viện jsPDF và tôi sẽ hướng dẫn bạn quy trình thiết lập mọi thứ và tạo một thiết kế khá đơn giản nhưng phức tạp mà bạn sẽ cần trên hành trình tạo các mẫu báo cáo PDF tuyệt vời

Báo cáo vấn đề

Làm việc với nội dung HTML/CSS chung sang PDF đã là một câu hỏi mở mà không có câu trả lời dứt khoát trong một thời gian dài. Chúng tôi đã vật lộn với nhiều cách tiếp cận khác nhau và nói chung, tất cả chúng đều có nhược điểm

Các câu hỏi phổ biến bạn sẽ thấy trên web được hiển thị bên dưới.
• Có thể lưu trang HTML dưới dạng PDF bằng JavaScript hoặc jQuery không?
• Cách xuất các trang HTML dưới dạng PDF bằng JavaScript thuần túy.
• Cách tạo nhiều trang.
• Tạo PDF từ HTML trong div bằng JavaScript.
• Nhiều trang với trình chuyển đổi HTML sang PDF.

Những câu hỏi cứ lặp đi lặp lại

Mục tiêu của Hướng dẫn này

Tôi sẽ hướng dẫn bạn cách bắt đầu và tích hợp jsPDF vào ứng dụng web JavaScript dựa trên trình duyệt của bạn

Khi kết thúc bài học này, bạn sẽ có thể làm những việc sau.
• Sử dụng Điểm cuối API fromHtml để nhận trình bao bọc bộ chứa nội dung HTML của chúng tôi.
• Tạo tệp PDF có nhiều trang.
• Tạo một chức năng để chuyển đổi hình ảnh thành hình ảnh base64 Bộ định vị tài nguyên thống nhất (URL) và sử dụng trong tiêu đề của chúng tôi.
• Thêm văn bản đầu trang và chân trang (như số trang) vào mỗi trang jsPDF được tạo riêng lẻ.

điều kiện tiên quyết

Bạn có thể tìm thấy thư viện tại đây. MrRio/jsPDF.
Nhấp để tải xuống octocat. jpg.

Tải xuống thư viện jsPDF và sử dụng hình ảnh làm hướng dẫn cho cấu trúc thư mục dự án của chúng tôi

Đầu tiên, chúng ta sẽ thiết lập cấu trúc thư mục như trong Hình trên.
Mở thư mục jsPDF từ điều kiện tiên quyết và sao chép thư mục dist vào thư mục dự án của bạn.
Tạo một tệp mới và đặt tên là chỉ mục. html.
Tải xuống hoặc Sao chép Hình ảnh Tiêu đề vào thư mục dự án.

Làm việc với chỉ mục. tệp html

Chúng tôi sẽ tạo khung HTML của chúng tôi bằng các thẻ HTML tiêu chuẩn

Index.html




    
    
    
 

  Generate PDF
  

    
  
  

Từ mã, nó sẽ tự giải thích, nhưng tôi sẽ xem qua các phần khác nhau của cấu trúc mã HTML

Phần đầu chứa tiêu đề trang và biểu định kiểu cho trang.
Phần nội dung HTML có nội dung sau.
• Nút. nút tạo PDF khi nhấp sẽ kích hoạt chức năng tạo mà chúng ta chưa tạo.
______8

• Phần tiếp theo sẽ chứa tất cả nội dung HTML mà chúng tôi muốn chuyển đổi sang PDF.
______9

Viết hàm JavaScript để xử lý chuyển đổi HTML

Biến toàn cục

Tạo chức năng PDF

generate = function()
{
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.setFontSize(18);
  pdf.fromHTML(document.getElementById('html-2-pdfwrapper'), 
    margins.left, // x coord
    margins.top,
    {
      // y coord
      width: margins.width// max width of content on PDF
    },function(dispose) {
      headerFooterFormatting(pdf)
    }, 
    margins);
    
  var iframe = document.createElement('iframe');
  iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
  document.body.appendChild(iframe);
  
  iframe.src = pdf.output('datauristring');
};

Giải thích mã

Bên trong hàm tạo, chúng tôi khởi tạo Đối tượng jsPDF dưới dạng PDF.
JsPDF có Điểm cuối API được gọi là fromHTML với các tham số sau.

jsPDFAPI.fromHTML = function (HTML, x, y, settings, callback, margins)

HTML là nội dung HTML mà bạn muốn chuyển đổi.
X là khoảng cách theo chiều ngang từ tọa độ x của trang bố cục PDF của bạn.
Y là khoảng cách dọc từ tọa độ y của trang bố cục PDF của bạn.

Chức năng gọi lại được sử dụng để thực hiện chức năng bổ sung trên các trang được tạo. Chúng tôi sẽ tận dụng chức năng gọi lại để thêm số trang và tiêu đề vào các trang của chúng tôi sau này

Chúng tôi cũng đang tạo một phần tử khung nội tuyến để hiển thị tệp PDF đã tạo của chúng tôi

Chức năng định dạng trang và chân trang

function headerFooterFormatting(doc)
{
    var totalPages  = doc.internal.getNumberOfPages();

    for(var i = totalPages; i >= 1; i--)
    { //make this page, the current page we are currently working on.
        doc.setPage(i);      
                      
        header(doc);
        
        footer(doc, i, totalPages);
        
    }
};

Giải thích mã

Hàm được sử dụng để thêm dữ liệu bổ sung vào mỗi trang của PDF và do đó, nó sẽ được gọi trên tham số gọi lại fromPDF. Phải mất một đối tượng jsPDF

Chức năng tiêu đề

function header(doc)
{
    doc.setFontSize(30);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
  
    if (base64Img) {
       doc.addImage(base64Img, 'JPEG', margins.left, 10, 40,40);        
    }
      
    doc.text("Report Header Template", margins.left + 50, 40 );
  
    doc.line(3, 70, margins.width + 43,70); // horizontal line
};

Tải hình ảnh tiêu đề và chuyển đổi thành base64

imgToBase64('octocat.jpg', function(base64) {
    base64Img = base64; 
});

Chức năng chuyển đổi hình ảnh

// You could either use a function similar to this or preconvert an image with, for example, http://dopiaza.org/tools/datauri
// http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
function imgToBase64(url, callback, imgVariable) {
 
    if (!window.FileReade) {
        callback(null);
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
      imgVariable = reader.result.replace('text/xml', 'image/jpeg');
            callback(imgVariable);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
};

Tải xuống dự án hoàn chỉnh ngay bây giờ. Bộ mã hóa HTML sang PDF. khóa kéo

Vui lòng chia sẻ nhận xét của bạn và giúp cải thiện mã bất cứ khi nào có thể

JavaScriptHTML/CSSHtml2pdfPdfJspdf

Bài báo cáo

Thưởng thức bài viết này?

25

Chia sẻ

Ameh Joseph

Nhà phát triển web Full Stack, Nhà thiết kế đồ họa & Cộng tác viên