JavaScript Chrome in sang PDF
Lần cuối cùng bạn in một trang web là khi nào? . Ví dụ Show
Nhưng các trình duyệt muốn làm quen với trang của bạn trên đường tạo PDF. Với ý định tốt nhất, họ thêm các lề bổ sung, điền vào chúng một số siêu dữ liệu mà bạn không muốn trên tài liệu đã tạo của mình và loại bỏ tất cả các màu nền. Tuyệt vời để in, nhưng không phải tất cả những gì bạn muốn trên bản PDF riêng của mình. Hãy xem ảnh chụp màn hình đối thoại In của Chrome bị cắt xén kém này Hộp thoại In của Chrome (như xuất hiện trên máy Mac vào đầu năm 2021) đang hiển thị bản xem trước, đủ thích hợp, Bách khoa toàn thư về Chế tác bản khắc gỗ của David Bull, với tất cả cài đặt được đặt thành mặc định Trong số rất nhiều tùy chọn này, năm tùy chọn có thể được kiểm soát trực tiếp hoặc gián tiếp thông qua CSS. Bố cục, khổ giấy, Lề, Đầu trang và cuối trang và Đồ họa nền Trong bài đăng này, tôi sẽ tập trung vào Chrome đơn giản vì trong tất cả các trình duyệt chính, công cụ in của nó đã tuân thủ các tiêu chuẩn web chặt chẽ hơn các trình duyệt khác trong ít nhất vài năm qua. Điều quan trọng là kể từ đầu năm 2021, các trình duyệt không dựa trên Chromium không cho phép chỉ định kích thước giấy tùy ý bằng CSS – đây là điều đầu tiên chúng tôi sẽ xem xét Ở cuối bài đăng này, tôi cũng sẽ viết về các tính năng liên quan khác của CSS trong bối cảnh in, cộng với cách in sang PDF bằng Chrome không đầu Đặt kích thước “giấy”Bạn không nên ra lệnh cho khổ giấy trên bất kỳ trang web cũ nào – xét cho cùng, người dùng có thể có sở thích riêng của họ. Tuy nhiên, tính năng CSS này có ích khi đã biết kích thước giấy mong muốn, chẳng hạn như trong ngữ cảnh của markdeep-thesis nơi người dùng có thể định cấu hình nó trong mã nguồn hoặc cho các trang trình bày markdeep, trong đó bạn muốn chính xác một trang trình bày trên mỗi trang Bên trong bộ chọn 2 của CSS, bạn có thể chỉ định một thuộc tính 0 có giá trị xác định khổ giấy. Bất kỳ cái nào cũng sẽ hoạt động – gần như chắc chắn có cái gì đó cho trường hợp sử dụng của bạn
Theo caniuse. com, tính năng này chỉ hoạt động trong các trình duyệt dựa trên Chromium như Chrome, Edge và Opera – cả Firefox và Safari đều không triển khai tính năng này Bởi vì tôi biết bạn sẽ hỏi. Bạn có thể lồng bộ chọn 2 bên trong truy vấn 2 – xét cho cùng, kích thước giấy chỉ phù hợp với ngữ cảnh in ấn – nhưng việc không sử dụng truy vấn phương tiện này sẽ không ảnh hưởng gìThêm hoặc xóa lềTương tự, điều này hữu ích nếu tài liệu của bạn đã có sẵn lề mà bạn muốn, trong trường hợp đó, bạn muốn loại bỏ bất kỳ lề bổ sung nào mà trình duyệt sẽ thêm vào. Là một lợi ích bổ sung, việc đặt lề thành 0 sẽ ẩn các dòng đầu trang và chân trang mặc định mà trình duyệt của bạn hiển thị trên mỗi trang – không có đủ dung lượng cho chúng
Theo caniuse. com, tính năng này hoạt động trong các trình duyệt dựa trên Chromium như Chrome, Edge và Opera, cũng như trong Firefox và – tin hay không tùy bạn. – Internet Explorer, quay lại IE 8. Safari, trong khi đó, chưa bao giờ nghe nói về điều này Nhưng xin chờ chút nữa. Bạn có thể nhắm mục tiêu trang đầu tiên của tài liệu của mình một cách riêng biệt bằng cách sử dụng lớp giả 3. Các trang 4 (được đánh số lẻ, giả sử tài liệu của bạn được viết bằng chữ viết từ trái sang phải) và trang 5 (được đánh số chẵn)
Điều này có vẻ hơi lỗi thời – tại sao người ta lại cần các lề khác nhau trên các trang bên trái và bên phải? . e. , lề phải của trang bên trái và lề trái của trang bên phải) có hình thức giống nhau, sau khi được liên kết, với từng lề bên ngoài, điều này có thể yêu cầu các điều chỉnh mà các lớp giả này cho phép Nếu bạn sử dụng các lớp giả này, Firefox sẽ không hiểu bạn nữa – tôi tin rằng bạn đang bắt đầu hiểu tại sao tôi lại thêm tuyên bố từ chối trách nhiệm chỉ hoạt động trong Chrome ở đầu bài viết này Buộc màu nềnTất cả các trình duyệt mặc định không in màu nền để tiết kiệm mực – rất hữu ích. Nếu thực sự cần, bạn có thể buộc bật lại nền trên cơ sở từng thành phần, chẳng hạn như đối với đoạn trích 6 xen kẽ với văn xuôi của bạn có nền màu xám nhạt mà bạn muốn giữ lại
Chế độ 7 này cũng vô hiệu hóa việc điều chỉnh các thành phần có độ tương phản thấp của một số trình duyệt trong chế độ inKhông có gì ngăn cản bạn sử dụng bộ chọn 8 ở đây, nhưng hãy suy nghĩ kỹ trước khi làm như vậy - những người dùng thực sự in trên giấy có thể không hài lòng nếu bạn làm như vậy (nhưng người bán mực sẽ tôn thờ bạn trong các nghi lễ bí mật của họ)Theo caniuse. com, tính năng này được hiểu bởi tất cả các trình duyệt chính. vâng Tại sao lại phải dựa vào chức năng in của trình duyệt khi có jsPDF và các thư viện tương tự?Vì các tính năng CSS mà tôi đã thảo luận trong bài viết này phụ thuộc vào người dùng đang chạy các phiên bản hiện đại của các trình duyệt cụ thể, nên sẽ rất tuyệt nếu có khả năng tạo PDF (bất kể là để in hay chỉ để đọc ngoại tuyến) từ một Có rất nhiều thư viện có mục đích thực hiện điều này, bao gồm cả jsPDF. Họ ít nhiều hoàn thành công việc bằng cách triển khai trình kết xuất HTML tùy chỉnh trong JavaScript – một nhiệm vụ khó khăn không có cơ hội tương thích hoàn toàn với các tiêu chuẩn web đang phát triển. phông chữ web và các tính năng CSS nâng cao có xu hướng giảm dần Trừ khi tài liệu mà bạn đang cố gắng tạo PDF rất đơn giản, nếu không tài liệu đó sẽ trông không giống với trong trình duyệt – điều này không quá quan trọng trong nhiều ngữ cảnh, nhưng như bất kỳ người cầu toàn về bố cục và kiểu chữ nào cũng có thể chứng thực, là phụ lục. Các tính năng CSS liền kề in khácTrong khi viết bài viết này, tôi đã nghĩ đến hai tính năng CSS bổ sung không tương tác với cài đặt trong hộp thoại In của Chrome nhưng lại rất phù hợp khi thiết kế tài liệu có thể in được gạch nốiThuộc tính 9 bị vô hiệu hóa theo mặc định xác định cách văn bản được gạch nối khi nó ngắt dòng trên nhiều dòng. Để đảm bảo vị trí gạch nối chính xác, hãy chỉ định ngôn ngữ mà tài liệu của bạn được viết – e. g. , 0 nếu nó bằng tiếng Anh 4Giải thích chi tiết hơn về chức năng này và cách gợi ý thủ công tại các điểm ngắt dòng, cùng với ghi chú về hỗ trợ trình duyệt, có sẵn trên MDN. Điều khiển gạch nối nâng cao được thảo luận trong bài viết của Richard Rutter Kiểm soát ngắt trangBạn có thể yêu cầu trình duyệt tránh phá vỡ một phần tử nhất định trên các trang (hoặc cột). Ví dụ: bạn sẽ không muốn một 1 chứa một hình ảnh và chú thích của nó được chia thành hai trang – nói một cách dễ hiểu, chú thích không phải là chú thích nếu nó không theo dõi những thứ liên quan đến nóĐó là những gì tài sản của 2 (nghệ sĩ trước đây gọi là 3) dành cho 8Thông tin chi tiết khác, bao gồm hỗ trợ trình duyệt, có sẵn trên MDN. Ngoài ra còn có các thuộc tính liên quan, nếu bí truyền hơn một chút, 4 và 5phụ lục. In không đầuVì tôi thích Safari hơn Chrome để lướt web hàng ngày, nên khá bất tiện khi kích hoạt Chrome mỗi khi tôi muốn, chẳng hạn như tạo phiên bản PDF cho sơ yếu lý lịch của mình. May mắn thay, mọi phiên bản Chrome gần đây đều có thể chạy ở chế độ không đầu – tôi. e. , trên dòng lệnh và không cần mở GUI của nó Điều này liên quan đến việc tìm ra vị trí mà tệp thực thi Chrome của bạn tồn tại – vị trí sẽ khác nhau giữa các nền tảng. Vì tôi đang dùng máy Mac nên bạn có thể tìm thấy của tôi tại 6. Bởi vì quá dài để gõ mỗi lần, tôi đã xác định một bí danh trong 7 của mình 3Sau đó, để tạo tệp PDF 8 từ tài liệu HTML 9, hãy chạy 6Cờ 0 xác định thời gian Chrome chờ giữa tải trang và in – điều này cho phép bố cục ổn định và mã JavaScript chạy. Các tài liệu phức tạp có thể yêu cầu giá trị cao hơn 1. Trên một số nền tảng, bạn cũng có thể cần cung cấp cờ 2
|