Làm cách nào để in html sang pdf?

in-html-to-pdf

In HTML sang pdf bằng jsPDF & dom-to-image

Cài đặt

npm i print-html-to-pdf

ví dụ đơn giản

<button id="print-button">Printbutton>
<div id="print-me">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit
    amet laoreet urna, eu convallis arcu. Etiam eget risus nec justo ultricies
    lobortis. Sed vehicula quam tellus, non porttitor felis pulvinar eget.
    Integer ac porttitor diam. Donec ultrices vel ex et scelerisque. Ut
    vulputate dolor nulla, vitae viverra tortor eleifend ut. Suspendisse
    potenti. In sagittis est non lectus blandit, non tempus erat maximus.
    Vestibulum id enim dignissim, viverra purus sed, finibus ex. Praesent quis
    consectetur est. Cras ac erat auctor, egestas magna et, gravida tellus.
    Phasellus non posuere tortor.
  p>
div>

import printHtmlToPDF from "print-html-to-pdf";

const printButton = document.getElementById("print-button");
printButton.addEventListener("click", async (event) => {
  const node = document.getElementById("print-me");
  const pdfOption = {
     jsPDF: {
       unit: 'px',
       format: 'a4',
     },
      spin: false,
      fileName: 'default'
   }
  };
  await printHtmlToPDF.print(node, pdfOption);
});

phù hợp với toàn bộ nội dung trong một ví dụ trang

<button id="print-button">Printbutton>
<div id="print-me">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit
    amet laoreet urna, eu convallis arcu. Etiam eget risus nec justo ultricies
    lobortis. Sed vehicula quam tellus, non porttitor felis pulvinar eget.
    Integer ac porttitor diam. Donec ultrices vel ex et scelerisque. Ut
    vulputate dolor nulla, vitae viverra tortor eleifend ut. Suspendisse
    potenti. In sagittis est non lectus blandit, non tempus erat maximus.
    Vestibulum id enim dignissim, viverra purus sed, finibus ex. Praesent quis
    consectetur est. Cras ac erat auctor, egestas magna et, gravida tellus.
    Phasellus non posuere tortor.
  p>
div>

import printHtmlToPDF from "print-html-to-pdf";

const printButton = document.getElementById("print-button");
printButton.addEventListener("click", async (event) => {
  const node = document.getElementById("print-me");
  const pdfOption = {
     jsPDF: {
       unit: 'px',
       format: 'a4',
     },
      spin: false,
      fileName: 'default',
      // If it is true the entire content will fit into one page with margin assigned
      // If false and content is bigger than one page than it will be printed to other pages
      fitToPage: true // default is false
   }
  };
  await printHtmlToPDF.print(node, pdfOption);
});

đặt ví dụ về lề pdf

<button id="print-button">Printbutton>
<div id="print-me">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit
    amet laoreet urna, eu convallis arcu. Etiam eget risus nec justo ultricies
    lobortis. Sed vehicula quam tellus, non porttitor felis pulvinar eget.
    Integer ac porttitor diam. Donec ultrices vel ex et scelerisque. Ut
    vulputate dolor nulla, vitae viverra tortor eleifend ut. Suspendisse
    potenti. In sagittis est non lectus blandit, non tempus erat maximus.
    Vestibulum id enim dignissim, viverra purus sed, finibus ex. Praesent quis
    consectetur est. Cras ac erat auctor, egestas magna et, gravida tellus.
    Phasellus non posuere tortor.
  p>
div>

import printHtmlToPDF from "print-html-to-pdf";

const printButton = document.getElementById("print-button");
printButton.addEventListener("click", async (event) => {
  const node = document.getElementById("print-me");
  const pdfOption = {
     jsPDF: {
       unit: 'px',
       format: 'a4',
     },
      spin: false,
      fileName: 'default',
      // You can assign margin for the pdf content
      margin: {
        top: 10,
        bottom: 10,
        left: 10,
        right: 10
      },
   }
  };
  await printHtmlToPDF.print(node, pdfOption);
});

bỏ qua ví dụ phần tử dom

<button id="print-button">Printbutton>
<div id="print-me">
  <h2 class="header">Ignore meh2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit
    amet laoreet urna, eu convallis arcu. Etiam eget risus nec justo ultricies
    lobortis. Sed vehicula quam tellus, non porttitor felis pulvinar eget.
    Integer ac porttitor diam. Donec ultrices vel ex et scelerisque. Ut
    vulputate dolor nulla, vitae viverra tortor eleifend ut. Suspendisse
    potenti. In sagittis est non lectus blandit, non tempus erat maximus.
    Vestibulum id enim dignissim, viverra purus sed, finibus ex. Praesent quis
    consectetur est. Cras ac erat auctor, egestas magna et, gravida tellus.
    Phasellus non posuere tortor.
  p>
div>

________số 8

- jsPDF

vui lòng tham khảo Tài liệu JSPDF để có thêm tùy chọn

Làm cách nào để in tệp HTML?

In tài liệu HTML .
Trên menu chính, nhấp vào Tệp > In
Nhấn CTRL+P

Tại sao các tệp pdf của tôi lưu dưới dạng HTML?

Nếu bạn chưa cài đặt bất kỳ trình xem PDF nào, thì bạn có thể chọn Chrome (nếu bạn đã cài đặt nó). Chrome có trình xem PDF tích hợp và có thể mở các tệp PDF. Khi Chrome được chọn làm trình xem PDF, các tệp PDF sẽ thay đổi thành HTML của Chrome .