Hướng dẫn how many ways we can print in javascript? - có bao nhiêu cách chúng ta có thể in trong javascript?

Hướng dẫn how many ways we can print in javascript? - có bao nhiêu cách chúng ta có thể in trong javascript?
Ảnh từ Unplash

Tùy thuộc vào những gì bạn muốn in và nơi bạn chạy mã JavaScript, có một số cách để in trong JavaScript.

Khi bạn muốn in trang web hiện tại của trình duyệt, bạn có thể sử dụng phương thức window.print().

Phương thức window.print() sẽ in nội dung của tab hiện đang hoạt động trong trình duyệt của bạn.

Bạn có thể chạy phương thức từ bảng điều khiển trình duyệt để in trang web bằng máy in của bạn.

Nhưng nếu bạn muốn in các giá trị và nội dung HTML bằng JavaScript, thì có một số cách để làm điều đó:

  • In vào bảng điều khiển bằng cách sử dụng
    <html dir="ltr" lang="end">
      <head>
        <meta charset="utf-8" />
        <title>New Tabtitle>
      head>
      <body>
        <h2>Welcome to the Interneth2>
      body>
    html>
    
    0
  • In giao diện trình duyệt bằng cách sử dụng
    <html dir="ltr" lang="end">
      <head>
        <meta charset="utf-8" />
        <title>New Tabtitle>
      head>
      <body>
        <h2>Welcome to the Interneth2>
      body>
    html>
    
    1
  • In vào hộp cảnh báo bằng phương pháp
    <html dir="ltr" lang="end">
      <head>
        <meta charset="utf-8" />
        <title>New Tabtitle>
      head>
      <body>
        <h2>Welcome to the Interneth2>
      body>
    html>
    
    2
  • In vào thẻ HTML bằng cách thay đổi giá trị thuộc tính
    <html dir="ltr" lang="end">
      <head>
        <meta charset="utf-8" />
        <title>New Tabtitle>
      head>
      <body>
        <h2>Welcome to the Interneth2>
      body>
    html>
    
    3

Hãy cùng xem cách thực hiện mỗi một trong những phương pháp này tiếp theo.

In bằng phương thức Console.log ()

Phương thức

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
0 cho phép bạn in dữ liệu và giá trị JavaScript vào bảng điều khiển.

Điều này rất hữu ích khi bạn muốn kiểm tra giá trị của các biến bạn có trong mã JavaScript như được hiển thị bên dưới:

let name = "Nathan";

console.log(name);
// prints: Nathan

Phương thức

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
0 hướng dẫn bảng điều khiển JavaScript để ghi lại giá trị được truyền dưới dạng tham số của nó.

Bảng điều khiển có sẵn cả trên trình duyệt và máy chủ Node.js.

In bằng phương thức tài liệu.write ()

Phương thức

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
1 được sử dụng để ghi dữ liệu vào thẻ
<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
7 của tài liệu HTML của bạn.

Phương pháp này sẽ xóa tất cả dữ liệu được lưu trữ bên trong thẻ

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
7 của trang web của bạn.

Ví dụ: giả sử bạn có tài liệu HTML sau được hiển thị trong trình duyệt của bạn:

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>

Khi bạn chạy lệnh

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
1 từ bảng điều khiển trình duyệt, tài liệu HTML ở trên sẽ bị ghi đè.

Chạy lệnh sau:

document.write("Hello World!");

Sẽ tạo ra đầu ra sau:

<html>
  <head>head>
  <body>
    Hello World!
  body>
html>

Như bạn có thể thấy, tất cả các thuộc tính và yếu tố được viết trước đây trong tài liệu đã bị xóa.

Mô hình đối tượng

document.write("Hello World!");
0 không có sẵn trong máy chủ Node.js, vì vậy bạn chỉ có thể sử dụng phương thức này từ trình duyệt.

In bằng phương thức Window.alert ()

Phương thức

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
2 được sử dụng để tạo một hộp cảnh báo có sẵn trong trình duyệt nơi bạn chạy mã.

Ví dụ: chạy mã bên dưới:

window.alert("Hello World!");

Sẽ tạo ra đầu ra sau:

Như bạn có thể thấy, tất cả các thuộc tính và yếu tố được viết trước đây trong tài liệu đã bị xóa.

Mô hình đối tượng document.write("Hello World!"); 0 không có sẵn trong máy chủ Node.js, vì vậy bạn chỉ có thể sử dụng phương thức này từ trình duyệt.

In bằng phương thức Window.alert ()

Phương thức

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
2 được sử dụng để tạo một hộp cảnh báo có sẵn trong trình duyệt nơi bạn chạy mã.

<html>
  <body>
    <h2 id="greetings">Welcome to the Interneth2>
  body>
html>

Ví dụ: chạy mã bên dưới:

const header = document.getElementById("greetings");
header.innerHTML = "Hello World!";

Sử dụng phương thức

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
2, bạn có thể kiểm tra các biến và giá trị JavaScript của mình bằng hộp cảnh báo trình duyệt.

<html>
  <body>
    <h2 id="greetings">Hello World!h2>
  body>
html>

In bằng cách thay đổi thuộc tính bên trong của phần tử của bạn

Bạn có thể in vào một phần tử HTML cụ thể có sẵn trên trang web của mình bằng cách thay đổi thuộc tính

<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
3 của phần tử đó.

  • document.write("Hello World!");
    
    6
  • document.write("Hello World!");
    
    7
  • document.write("Hello World!");
    
    8

Ví dụ: giả sử bạn có tài liệu HTML sau:

Bạn có thể chọn phần tử

document.write("Hello World!");
4 ở trên bằng cách sử dụng JavaScript và thay đổi thuộc tính
<html dir="ltr" lang="end">
  <head>
    <meta charset="utf-8" />
    <title>New Tabtitle>
  head>
  <body>
    <h2>Welcome to the Interneth2>
  body>
html>
3 của nó như được hiển thị bên dưới: