Cách in trong html

CSS (cascading style sheet) cung cấp cho bạn quyền kiểm soát đáng kể đối với cách hiển thị nội dung trên các trang web của bạn trên màn hình. Điều khiển này cũng mở rộng sang các phương tiện khác, chẳng hạn như khi trang web được in

Bạn có thể thắc mắc tại sao bạn muốn thêm tính năng in vào trang web của mình;

Tuy nhiên, có những trường hợp khi thêm nút in hoặc liên kết đến một trang sẽ không chỉ giúp người dùng của bạn thực hiện quy trình dễ dàng hơn khi họ cần in một trang mà thậm chí có lẽ quan trọng hơn là cho phép bạn kiểm soát nhiều hơn cách các bản in đó sẽ xuất hiện trên trang web.

Dưới đây là cách thêm nút in hoặc liên kết in trên các trang của bạn và cách xác định phần nội dung trang nào sẽ được in và phần nào không

Thêm một nút in

Bạn có thể dễ dàng thêm nút in vào trang web của mình bằng cách thêm đoạn mã sau vào tài liệu HTML nơi bạn muốn nút xuất hiện

onclick="window.print();return false;" />

Nút sẽ được gắn nhãn là In trang này khi xuất hiện trên trang web. Bạn có thể tùy chỉnh văn bản này thành bất cứ thứ gì bạn thích bằng cách thay đổi văn bản giữa các dấu ngoặc kép sau

value=
trong đoạn mã trên

Thêm một liên kết in

Việc thêm một liên kết in đơn giản vào trang web của bạn thậm chí còn dễ dàng hơn. Chỉ cần chèn mã sau vào tài liệu HTML của bạn nơi bạn muốn liên kết xuất hiện

print

Bạn có thể tùy chỉnh văn bản liên kết bằng cách thay đổi "in" thành bất cứ thứ gì bạn chọn

Làm cho các phần cụ thể có thể in được

Bạn có thể thiết lập khả năng cho người dùng in các phần cụ thể trên trang web của mình bằng nút in hoặc liên kết. Bạn có thể làm điều này bằng cách thêm một bản in. css vào trang web của bạn, gọi nó trong phần đầu của tài liệu HTML và sau đó xác định những phần mà bạn muốn in dễ dàng bằng cách xác định một lớp.  

Đầu tiên, thêm đoạn mã sau vào phần đầu của tài liệu HTML của bạn

type="text/css" media="print" />

Tiếp theo, tạo một tệp có tên print. css. Trong tập tin này, thêm đoạn mã sau

body {visibility:hidden;}
.print {visibility:visible;}

Mã này xác định tất cả các phần tử trong nội dung là ẩn khi được in trừ khi phần tử được gán lớp "in" cho nó

Bây giờ, tất cả những gì bạn cần làm là gán lớp "in" cho các phần tử của trang web mà bạn muốn có thể in được. Ví dụ: để làm cho một phần được xác định trong phần tử div có thể in được, bạn sẽ sử dụng

Mọi thứ khác trên trang không được chỉ định cho lớp này sẽ không được in

Trích dẫn bài viết này

Định dạng

trích dẫn của bạn

Chapman, Stephen. "Làm thế nào để thêm một nút in hoặc liên kết đến trang web của bạn. "ThinkCo. https. //www. suy nghĩ. com/how-to-add-a-print-button-4072006 (truy cập ngày 6 tháng 2 năm 2023)

Một plugin Sublime Text 2/3 để in các tệp dưới dạng HTML với tô sáng cú pháp màu và số dòng, đồng thời mở chúng trong trình duyệt của bạn để in

Chuyển đổi màu và HTML hiện được thực hiện bởi Pygments, hỗ trợ nhiều ngôn ngữ và cú pháp

Hiện tại Plugin được chỉ định từ bọc cho ST3 vẫn đang được phát triển. Trình duyệt web sẽ vẫn xử lý gói từ khi cần thiết

Cài đặt

  • Cài đặt Trình quản lý gói
  • Sử dụng Cmd+Shift+P hoặc Ctrl+Shift+P sau đó Package Control: Install Package
  • Tìm kiếm Print to HTML và cài đặt nó

Nếu bạn muốn cài đặt thủ công, hãy cài đặt git, sau đó

git clone https://github.com/jchampy/sublimetext-print-to-html "/Print to HTML"

Cách sử dụng

  • Để có kết quả tốt nhất, trước tiên hãy lưu tệp của bạn với phần mở rộng thích hợp
  • Để in tệp hiện tại, sử dụng một trong các phương pháp sau
    • sử dụng Shift+Alt+P để in tệp hiện tại dưới dạng HTML qua trình duyệt của bạn hoặc
    • từ menu Tệp, sử dụng Print as HTML to Browser hoặc Print as HTML to New Buffer
    • nhấn Ctrl+Shift+P hoặc Cmd+Shift+P sau đó gõ Cmd+Shift+P0
  • Chỉnh sửa cài đặt trong Cmd+Shift+P1 để tùy chỉnh định dạng và hành vi đầu ra. Các tùy chọn như đơn sắc, đánh số dòng và hành vi của trình duyệt có thể được sửa đổi

Mục tiêu trong tương lai

  • Triển khai lại Word Wrap JavaScript sau khi các lỗi được băm ra từ Phiên bản SublimeText2

  • Sử dụng phạm vi nội bộ của ST2 và dữ liệu màu từ bộ đệm để tạo bản sao chính xác của tệp từ ST2 ở dạng HTML. Cách tiếp cận hiện tại sử dụng Pygments có những hạn chế liên quan đến các định dạng mà Pygments không biết (e. g. Markdown) và các tài liệu có cú pháp hỗn hợp (e. g. PHP được nhúng trong HTML)

    Bạn đã bao giờ thử in từ trình duyệt web của mình chưa?

    Các sự cố phổ biến khi in từ web bao gồm các yếu tố bị dịch chuyển, thiếu hình ảnh, nội dung không vừa với trang, v.v.

    Tôi sẽ chỉ cho bạn cách làm cho trang web của bạn được in giống như trên màn hình

    Giúp đỡ. Trang in của tôi trông rất tệ

    Bạn có một trang web trông tuyệt vời trên màn hình và bạn cần người dùng có thể in những gì họ nhìn thấy

    Để kiểm tra những gì người dùng sẽ thấy khi họ in, hãy chọn Tệp > In từ Google Chrome (có bản xem trước bản in đẹp mắt). Thật không may, bản xem trước bản in trông không giống trang web đẹp đẽ của bạn

    Bố cục bị mất hoàn toàn trong bản in… hay là vậy?

    cách khắc phục nhanh

    Nếu có một trang đơn giản, bạn có thể sửa đổi một thuộc tính HTML để cải thiện đáng kể kết quả in ra

    To apply the fix, open your HTML file in a text editor and search for any  or