Html trong pdf

Question

Cách dễ nhất để đặt tài liệu PDF sang tài liệu HTML là sử dụng thẻ với thuộc tính href. Những thứ bạn cần thêm vào thành phần là URL hoặc liên kết tham chiếu của tệp PDF của bạn. Mã của bạn sẽ giống như thế này.

Nội dung chính Show

2. Viết code cho file index. html
3. Viết code cho file style. scss
3. Viết code cho file script. js
4. Total hết

VD



  
    Title of the document
  
  
    PDF Example
    Open a PDF file example.

Set source to the web address of your PDF file

Đặt thuộc tính chiều cao và chiều rộng để xác định kích thước của khung nội tuyến

Mã hoàn chỉnh sẽ như thế này



  
    Title of the document
  
  
    PDF Example with iframe

Nếu bạn không muốn người dùng tải xuống tệp PDF của mình, chỉ cần thêm # thanh công cụ = 0 sau URL của tài liệu PDF của bạn



  
    Title of the document
  
  
    How to disable downloading of the PDF document

Nguồn. Cách nhúng trình xem PDF trong HTML

service by. Vũ Đức Nguyên

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 sát CV thôi, pass PV ngay lập tức phải hông ạ

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>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF demotitle>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm//dist/jquery.min.js">script>
    <script src="./script.js">script>
  head>
  <body>
    <div class="wrapper">
      <h2 class="wrapper__title">This is titleh2>
      <div id="question-box-id" class="question-wrapper">div>
    div>
  body>
html>

Ở đây mình đã import các file 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 pure

3. Viết code cho file style. 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%;
  }
}

Hướng dẫn html-pdf

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

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

Hướng dẫn html-pdf

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

Hướng dẫn html-pdf

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

Hướng dẫn html-pdf

Tiếp theo là chèn nội dung vào cho đẹp nè

Hướng dẫn html-pdf

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

Hướng dẫn html-pdf

Đâ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é

Hướng dẫn html-pdf

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

Hướng dẫn html-pdf

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)

Hướng dẫn html-pdf

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

Hướng dẫn html-pdf

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

Hướng dẫn html-pdf

Giờ thì đẹp rồi phải chào ạ

Hướng dẫn html-pdf

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]

programming html

Html trong pdf

PDF Example

PDF Example with iframe

How to disable downloading of the PDF document

2. Viết code cho file index. html

3. Viết code cho file style. scss

3. Viết code cho file script. js

4. Total hết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội