Hướng dẫn css for print pdf - css để in pdf

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é.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: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.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é.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.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

DOCTYPE html>

  
    
    
    
    PDF demo
    
    
    
  
  
    
      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.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élive server nhé

3. Viết code cho file script.js

$[document].ready[function [] {
  window.onload = myApp;

  function myApp[] {
    for [var i = 0; i