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

 title="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=

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 //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 media attribute with a value of all:

  Tải lại trang trong trình duyệt của bạn và chọn Tệp > In

  Chọn hộp kiểm Hình nền để bao gồm hình nền

  Nếu mọi thứ có vẻ tốt ở giai đoạn này, thì bạn đã sẵn sàng. Bạn có thể muốn cung cấp hướng dẫn cho người dùng về cách in với nền, nhưng ngoài điều đó, trang web của bạn đã sẵn sàng để in

  Thay đổi đơn giản này sẽ không khắc phục được mọi trường hợp in. Điều gì sẽ xảy ra nếu mọi thứ vẫn không ổn ở giai đoạn này? . Đừng lo lắng, chúng tôi đã có câu trả lời

  Điều gì xảy ra nếu bản sửa lỗi nhanh không hoạt động?

  Có một cách để kiểm soát nhiều khía cạnh hơn của việc in ấn. Trên thực tế, bạn thậm chí có thể nhắm mục tiêu kiểu dáng dành riêng cho bản in trên các yếu tố riêng lẻ mà tôi sẽ chỉ cho bạn ngay sau đây. Điều này sẽ yêu cầu một số thử nghiệm

  Cụ thể, hãy xem việc in chứng chỉ từ khóa học Adobe Captivate

  Tôi sẽ hướng dẫn cách in chứng chỉ sạch mà không cần bất kỳ giao diện người dùng trên màn hình nào

  Tạo tệp sẽ chứa các quy tắc in

  First, add a link in the HTML  to an additional CSS file:

  Trên dòng đầu tiên của bản in mới được tạo. css, hãy nhập lại CSS hiện có [được tạo bởi Captivate] nhưng với loại phương tiện in

  @import url["nội dung/css/CPLibraryAll. css"] in;

  Thêm định nghĩa cho @page để kiểm soát các khía cạnh của trang in

  @trang { }

  Thêm một truy vấn phương tiện để nhắm mục tiêu các yếu tố để in

  @media in { }

  Chúng tôi sẽ điền vào các quy tắc CSS này khi chúng tôi kiểm tra

  vấn đề về giấc ngủ. tốc độ thử nghiệm

  Có thể bạn không nhận ra, nhưng nếu quá trình giải quyết vấn đề của bạn có những bước không cần thiết, nó sẽ làm bạn chậm lại và cản trở khả năng đạt được giải pháp của bạn. Trước khi chúng tôi bắt đầu thực hiện các thay đổi, hãy xem cách tiếp cận của chúng tôi đối với vấn đề tạo kiểu in này. Trong trường hợp này, giải pháp mong muốn là giấy chứng nhận được in đẹp mắt của chúng tôi

  Vòng phản hồi mặc định của chúng tôi để thử nghiệm CSS mới giống như

  • Cập nhật CSS của chúng tôi
  • Lưu các tập tin
  • Chuyển sang trình duyệt
  • Làm mới trang
  • Chọn File > Print và xem kết quả
  • Đóng hộp thoại In
  • Rửa sạch và lặp lại

  Đó chỉ là khoảng sáu bước, nhưng nếu bạn lặp lại quá trình này 30 lần thì đó là 180 bước. Rất tiếc. Nếu bạn giống tôi, bạn không thể dành thời gian hoặc sự tỉnh táo để chạy qua các bước này 180 lần

  Làm thế nào để đạt được giải pháp nhanh hơn

  Hãy khắc phục sự cố in này một cách thông minh và tiết kiệm cho chúng tôi rất nhiều thời gian trong quá trình này. Trong khóa học Giải quyết vấn đề dành cho Chuyên gia web, tôi chỉ cho bạn cách thu nhỏ vòng phản hồi

  Giống như trong khóa học, chúng ta sẽ sử dụng các công cụ Kiểm tra trang web để giảm sáu bước xuống còn một

  Cập nhật giá trị CSS và xem thay đổi trực tiếp trong trình duyệt

  bam. Quy trình 180 bước giảm xuống còn 30 bước. Bây giờ bạn có thể tiếp tục một ngày của mình với tư cách là một người giải quyết vấn đề lành mạnh và đáng tự hào

  Tôi muốn giải câu đố, Pat

  Trong Google Chrome [có các công cụ kiểm tra web tốt nhất], hãy mở Trình kiểm tra. Xem > Nhà phát triển > Công cụ dành cho nhà phát triển hoặc nhấp chuột phải và chọn Kiểm tra phần tử

  Chọn biểu tượng thiết bị ở góc trên bên trái của bảng điều khiển để chuyển sang Mô phỏng thiết bị

  Tìm và chọn tab Thi đua [thường ở gần cuối]

  Điều hướng đến phần Phương tiện . Chọn hộp kiểm phương tiện CSS và đảm bảo rằng in được chọn trong menu thả xuống

  Bây giờ bạn có thể xem tài liệu sẽ được in như thế nào [trừ ranh giới trang]

  Bên trong các công cụ kiểm tra, giờ đây chúng ta có thể tìm kiếm các phần tử và kiểm tra CSS mới. Ví dụ: tôi nhận thấy rằng các điều khiển phát lại có id của playbar, sau đó tôi nhắm mục tiêu trong CSS chỉ in để ẩn các điều khiển

  @media in {
  #playbar { hiển thị. không có. quan trọng;
  }

  Thực hiện các điều chỉnh pixel riêng lẻ bằng các phím mũi tên LÊN và XUỐNG. Thêm SHIFT để nhảy theo gia số 10 pixel

  Tôi đã sử dụng kỹ thuật kiểm tra nhanh này để thấy rằng việc di chuyển vùng chứa chính 278 pixel sang bên trái sẽ ẩn Mục lục mà tôi đã thêm vào CSS chỉ in

  #main_container { còn lại. -278px. quan trọng;

  Tôi cũng muốn ẩn nút In chứng chỉ . Khi sử dụng Trình kiểm tra, tôi thấy rằng Captivate tạo id bắt đầu bằng Button_. CSS này ẩn nút đó

  [id^="Button_"]{ hiển thị. không có. quan trọng;

  Trong khi đó, Chrome đang xem trước trực tiếp các thay đổi. Chúng tôi không phải chuyển đổi giữa các ứng dụng

  Một vài điều chỉnh cuối cùng yêu cầu bạn kiểm tra Print Preview. Đây là bản in đã hoàn thành. css có cài đặt phù hợp với tôi về lề trang

  @trang {
  lề. 25in;
  đệm. 0;
  }
  
  @media in {
  html, nội dung {
  chiều rộng. 110%;
  chiều cao. tự động;
  lề. tự động;
  đệm. 0;
  }
  
  #main_container { còn lại. -278px. quan trọng;
  #playbar { hiển thị. không có. quan trọng;
  [id^="Button_"]{ hiển thị. không có. quan trọng;}
  }

  Các cài đặt này được tối ưu hóa để in ngang vì chứng chỉ nằm ngang. Lưu ý rằng bạn có thể sử dụng đơn vị in [e. g. , inch và mm] bên trong quy tắc @page

  Bạn có thể in một tệp HTML không?

  Nhấn phím tắt Ctrl + P để in trang, sau đó trong cửa sổ in xuất hiện, thay đổi Đích thành Lưu dưới dạng PDF hoặc chọn Adobe PDF làm máy in. Sau khi thực hiện các bước trên, khi bạn in nó được lưu dưới dạng PDF trên máy tính của bạn

  Làm cách nào để in HTML bằng JavaScript?

  JavaScript không có bất kỳ đối tượng in hoặc phương thức in nào. Bạn không thể truy cập các thiết bị đầu ra từ JavaScript. Ngoại lệ duy nhất là bạn có thể gọi cửa sổ. print[] trong trình duyệt để in nội dung của cửa sổ hiện tại .

  Làm cách nào để in Hello World trong HTML?

  .

  Xin chào thế giới

  .

  .

  Làm cách nào để in ra bảng điều khiển HTML?

  html trên trình duyệt [e. g. chrome], nhấp chuột phải vào trình duyệt và nhấp vào kiểm tra. Nhấp vào bảng điều khiển từ tab kiểm tra , bạn sẽ thấy bảng điều khiển in ra "Xin chào Javascript"].