Khuyến nghị và cách dễ nhất để bắt đầu là thả thư viện được lưu trữ CDN vào trang của bạn, bên dưới là lệnh.

sử dụng mã cài đặt

Tạo tài liệu PDF qua thư viện JavaScript

JsPDF cung cấp chức năng tạo tài liệu PDF cũng như các sửa đổi bên trong các ứng dụng JavaScript. Bạn có thể dễ dàng tạo tài liệu PDF và thêm trang mới vào đó. Bạn có thể xác định hướng tài liệu, đơn vị và định dạng trang mặc định trong khi tạo tài liệu mới. Khi PDF được tạo, bạn có thể dễ dàng thêm các trang mới, chèn hình ảnh, v.v. vào nó một cách dễ dàng.

Tạo tài liệu PDF qua JavaScript

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

Chèn văn bản sang tài liệu PDF qua JavaScript

API JsPDF tạo điều kiện cho các nhà phát triển JavaScript thêm và hiển thị văn bản bên trong tài liệu PDF. Để vẽ văn bản, bạn cần xác định tên phông chữ. Chúng tôi có thể chọn từ các phông chữ có sẵn. Cũng có thể thay đổi họ phông chữ và kiểu phông chữ. Sau đó, chúng ta có thể xác định kích thước phông chữ, màu văn bản và hơn thế nữa.

Thêm văn bản vào PDF hiện có bằng JavaScript

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

Thêm đồ họa vào tài liệu PDF qua JavaScript

Thư viện JsPDF cho phép JavaScript chuyên nghiệp vẽ đồ họa bên trong tài liệu PDF. Đồ họa luôn tăng thêm giá trị cho phần nội dung. Đầu tiên, chúng ta phải thiết lập màu tô và nét vẽ cho các hình dạng đã vẽ. Chúng ta cũng có thể thiết lập chiều rộng nét vẽ. Mọi hàm vẽ hình đều lấy tọa độ điểm trung tâm làm hai tham số đầu tiên (trừ tam giác). Họ cũng có kiểu vẽ tham số cuối cùng. Chúng ta có thể vẽ một hình elip, bằng cách đi qua hai bức xạ hoặc vòng tròn, bằng cách chỉ đi qua một bán kính, một hình tam giác, bằng cách chuyển qua tọa độ của mỗi góc và hơn thế nữa.

---

Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!

Chào mọi người, bài này mình xin chia sẻ với các bạn cách để export PDF từ html, css và javasript. Và đọc đến đây chắc nhiều bạn nghĩ là chỉ cần ctrl P là được thôi mà, đúng không ạ?. Vâng, đúng rồi đó ạ, nhưng điều mình muốn nói ở đây là chia sẻ kinh nghiệm từ việc code html, css, javascript cho đến khi print ra sẽ có nhiều vấn đề và nếu bạn chưa bao giờ làm thì cùng mình tìm hiểu nhé.

À, bạn nào có đang làm cho mình personal blog áp dụng vào thì quá hay luôn, vì bạn có thể tạo một CV trên đó và khi xin việc thì chỉ cần send cho HR thôi, khi đi in ra thì cũng rất dể nữa, chỉ cần truy cập vào domain blog của mình CTRL P và HÉT LỚN:

Cô ới, in cho con cái CV đi xin việc phát ạ :v

đi nộp CV thôi, pass PV ngay lập tức phải hông ạ

. Mình đùa thôi, chứ không cần phải hét lớn đâu ạ. Mình cũng đang có một blog mà chưa hoàn thiện nên mình xin chưa chia sẻ ở đây, mình sẽ chia sẻ với các bạn tham khảo ở một bài viết khác nhé. Thôi không tào lao nữa mình bắt đầu thôi.

Sẽ có rất nhiều format khác nhau, sẽ có loại PDF có content this, content that, nên hy vọng sẽ cover được hết các cases mà các bạn cần nhé.

1. Create folder:

Mình sẽ tạo một folder tên là pdf-demo, và lần lượt tạo các file index.html, styles.scss, script.js như hình bên dưới.

Tiếp theo mình sẽ code và giải thích thật chi tiết nhé!

2. Viết code cho file index.html

  
    
    
    
    
    
    
    
  
  
    

      
This is title
      

    
  

Ở đây mình đã import các files cần thiết vào rồi, và mình có sử dụng thằng JQuery này nữa nhé, bạn nào không thích dùng thì có thể dùng Js thuần.

3. Viết code cho file styles.scss

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 595px;
  margin: 0 auto;
}
.wrapper {
  &__title {
    text-align: center;
    margin-bottom: 30px;
  }
}
.question-box {
  padding: 20px;
  background: rgb(247, 247, 247);
  &:not(:last-child) {
    margin-bottom: 20px;
  }
  &__question {
    font-weight: 700;
    margin-bottom: 10px;
  }
  &__answers {
    display: flex;
  }
  &__answer {
    width: 30%;
  }
}

Rồi nó ra như vậy nè, chưa có gì hết cả, giờ mình viết js để insert content vào cho nó.

À bạn nào chưa biết làm ntn để mình run với localhost này á, thì mình dùng extension là live server nhé

3. Viết code cho file script.js

$(document).ready(function () {
  window.onload = myApp;
  function myApp() {
    for (var i = 0; i < 10; i++) {
      $("
# question-box-id").append(`
        

          
Dear developer, our mission is to serve all the best programming news you’ll ever need. Ready?
          

            
abc
            
abc
            
abc
            
abc
          
        
    `);
    }
  }
});

Rồi cú pháp Jquery thần thánh đây rồi

Mình sử dụng onload event với mục đích là sẽ chạy hàm này khi mà mọi thứ đã được loaded. Để đảm bảo rằng khi print sẽ chính xác nhất. Một lý do nữa tại sao dùng onload là khi trong PDF có các images thì chúng ta phải đảm bảo rằng nó phải được tải xong rồi mới thực thi hàm myApp. Giờ mình sử dụng onload khi nào xong xuôi hết mình sẽ sử dụng thằng onbeforeprint, thằng này mục đích là khi press CTRL P chạy hàm myApp trước khi print thôi.

Tiếp theo là insert content vào cho đẹp nè

Đẹp rồi, Giờ mình in được chưa?, được rồi nè in thử nhé.

Đây bạn có thế nhận ra rằng text hơi nhỏ, và background của mỗi câu hỏi thì đã bị mất đi, giờ mình mong muốn khi in ra định dạng là A4 và không có margin vậy thì mình vào files styles.scss setting lại nhé.

-webkit-print-color-adjust: exact; đảm bảo rằng khi in colors vẫn giữ chính xác

Tiếp theo, mình lại có một lỗi nữa là giữa các page với nhau thì text đang bị cắt đứt, vì lý do là nó đang phân trang mà không cần biết là nội dung trên đó có hiển thị như thế nào! Giờ mình chỉnh lại nhé.

Giờ mình thêm thằng này vào, page-break-inside: avoid; thuộc tính này có mục đích là tránh break page vào bên trong element

Avoid page-break inside the element (if possible) (https://www.w3schools.com/cssref/pr_print_pagebi.asp)

Giờ đẹp hơn rồi, nhưng vẫn còn lỗi là ở page thứ 2 trở đi nó sát lề quá

Nên mình cần thêm css cho nó là khi print margin là 20px

Giờ thì đẹp rồi phải hông ạ

4. Tổng hết

Các bạn thấy đấy khi mới làm về PDF, khá rắc rối, mặc dù không khó lắm, nhưng có những thứ mình chưa hề biết nên cảm giác khó. Nên dù khó thế nào cũng đừng bỏ cuộc nhé vui vẻ thôi cuộc sống mà. Bài viết đến đây cũng khá dài rồi, nên hôm này mình xin dừng lại, vẫn còn một feature nữa đó là đánh số trang (page number), dịp sau mình sẽ cố gắng viết về nó nhé. Cảm ơn mọi người! [Sourse code]