Chào mọi người, bài này mình xin chia sẻ với các bạn cách xuất PDF từ html, css và javasript. Và đọc đến đây chắc nhiều bạn cho rằng 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 để khi in 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 đang làm cho blog cá nhân của mình áp dụng vào thì quá hay luôn, vì bạn có thể làm CV trên đó và khi xin việc thì chỉ cần gửi cho HR thôi, khi đi vào ra thì cũng rất dễ chịu nữa,
Cô mới, vào cho con cái CV đi xin việc phát ạ. v
đi cập CV thôi, pass PV ngay lập tức phải hông ạ
Sẽ có rất nhiều định dạng khác nhau, sẽ có loại PDF có nội dung này, nội dung kia, nên hy vọng sẽ bao hàm được hết các trường hợp mà các bạn cần nhé
1. Tạo thư mục
Mình sẽ tạo một folder có tên là pdf-demo, và lần lượt tạo các file index. html, phong cách. scss, kịch bản. js như hình bên dưới
Nguyễn Xuân Vinh @nguyen. xuan. vinh
Theo dõi
418 11 15
Đã đăng vào ngày 8 tháng 18 năm 2021 9. 58 SA 5 phút đọc
2. 5K
0
4
Cách in PDF từ HTML, CSS, JAVASCRIPT- Report
- Add to series of me
Chào mọi người, bài này mình xin chia sẻ với các bạn cách xuất PDF từ html, css và javasript. Và đọc đến đây chắc nhiều bạn cho rằng 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 để khi in 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 đang làm cho blog cá nhân của mình áp dụng vào thì quá hay luôn, vì bạn có thể làm CV trên đó và khi xin việc thì chỉ cần gửi cho HR thôi, khi đi vào ra thì cũng rất dễ chịu nữa,
Cô mới, vào cho con cái CV đi xin việc phát ạ. v
đi cập CV thôi, pass PV ngay lập tức phải hông ạ
Sẽ có rất nhiều định dạng khác nhau, sẽ có loại PDF có nội dung này, nội dung kia, nên hy vọng sẽ bao hàm được hết các trường hợp mà các bạn cần nhé
1. Tạo thư mục
Mình sẽ tạo một folder có tên là pdf-demo, và lần lượt tạo các file index. html, phong cách. scss, kịch bản. js như hình bên dưới
Đẹp rồi, Giờ mình trong được chưa?, được rồi nè trong thử nhé
Đây bạn có thế nào nhận ra rằng văn bản hơi nhỏ và phông nền của mỗi câu hỏi thì đã bị mất đi, giờ mình mong muốn khi định dạng ra là A4 và không có lề vậy thì mình vào file styles. thiết lập lại scss nhé
-webkit-in-điều chỉnh màu. chính xác;
Tiếp theo, mình lại có một lỗi nữa là giữa các trang với nhau thì văn bản đang bị cắt ngang, vì lý do là nó đang phân trang mà không cần biết là nội dung trên đó hiển thị như thế nào. Giờ mình edit lại nhé
Giờ mình thêm thằng này vào, page-break-inside. ngăn ngừa;
Tránh ngắt trang bên trong phần tử [nếu có thể] [https. //www. w3schools. com/cssref/pr_print_pagebi. asp]
Giờ đẹp hơn rồi, nhưng vẫn còn lỗi ở trang thứ 2 trở đi nó sát lề quá
Nên mình cần thêm css cho nó khi print margin là 20px
Giờ thì đẹp rồi phải chào ạ
4. Total 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 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 hơi dài rồi, nên hôm nay mình xin dừng lại, vẫn còn một tính năng nữa đó là đánh số trang [số trang], dịp sau mình sẽ cố gắng viết về nó nhé!. Cảm ơn mọi người. [Mã nguồn]