In phía máy khách bằng javascript

Phương thức print() in nội dung của trang web hiện tại có thể bao gồm văn bản, hình ảnh, đồ họa, v.v. Nếu tài liệu vẫn đang tải trong khi chức năng này được gọi khi tài liệu kết thúc quá trình tải trước khi mở hộp thoại in. Phương pháp này bị chặn khi mở hộp thoại in

cú pháp.  

window.print();

Tham số. Phương thức này không nhận bất kỳ tham số nào

Giá trị trả về. Nó không trả về bất kỳ giá trị nào

Tiếp cận. Tạo một nút có sự kiện onClick được đính kèm với phương thức printpage() và nó sẽ được kích hoạt khi chúng tôi muốn in trang. Khi người dùng nhấp vào nút thì phương thức printpage() (trong thẻ script) sẽ được gọi, phương thức này có thể chứa một số mã giúp in trang. Sau đó, một hộp thoại sẽ xuất hiện chứa tùy chọn lưu tài liệu

Thí dụ. Ví dụ này mô tả việc sử dụng phương thức print() để in trang web hiện tại trong Javascript

Tuy nhiên, các biểu mẫu vẫn phải được in và chúng phải khớp chặt chẽ với các biểu mẫu văn phòng phẩm in sẵn hiện có, vì vậy tôi không thể chỉ in biểu mẫu trên màn hình và sử dụng css và các loại phương tiện sẽ không hoạt động đủ tốt. Tôi nảy ra ý tưởng có một IFrame ẩn có một bộ html/css riêng. Khi người dùng hoàn thành biểu mẫu trực tuyến và nhấp vào In, tôi sẽ xác thực biểu mẫu và sau khi hợp lệ sẽ sao chép dữ liệu từ biểu mẫu vào IFrame html. Một lần nữa, điều này hoạt động tốt, tuy nhiên tôi gặp một vấn đề là thỉnh thoảng khi tôi in IFrame, tôi lại nhận được biểu mẫu trực tuyến được in thay thế

reportFrame.focus();
reportFrame.print();

Điều này trước tiên đặt tiêu điểm thành IFrame ẩn trước khi yêu cầu in nó, tuy nhiên, có vẻ như đôi khi tiêu điểm không được đặt trên IFrame trước khi In được phát hành. Tôi đã thay đổi mã để sử dụng tính năng lệnh bị trì hoãn javascript của setTimeout nhằm cho phép trình duyệt có một chút thời gian để đặt tiêu điểm trước khi lệnh in được gọi và sự cố đã được giải quyết

reportFrame.focus();
setTimeout('reportFrame.print()',20);

Đây là cách đơn giản và thuần túy nhất để in, nhưng nó tốn nhiều công sức hơn một chút, vì để có được màu nền của một phần tử, bạn cần triển khai polyfill với truy vấn phương tiện, vì print() không hỗ trợ màu nền 😅

Giả sử bạn cũng có một số phần tử mà bạn không muốn xuất hiện trong bản in của mình, bạn có thể đặt phần tử đó thành không chỉ hiển thị khi in

Trong css hoặc scss của bạn, bạn cần thêm nếu bạn muốn có màu nền trong một số thành phần

@media  print {
    thead{
        box-shadow:  inset  0  0  0  1000px  #b9d1ea  !important;
    }
    someElement{
        display:none;
    }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

trong kịch bản của bạn

//...previous stuffs of the component
<script>
    import './index.css'
    export default{
        methods: {
            generatePDF(){
                window.print() //simple like that
            }
        }
    }
</script>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Phương thức print() in nội dung của cửa sổ hiện tại

Phương thức print() mở Hộp thoại In, cho phép người dùng chọn các tùy chọn in ưa thích

JSPrintManager là một giải pháp Ứng dụng Javascript + Máy khách cho các tình huống In & Quét phía Máy khách được thiết kế để sử dụng trong bất kỳ Trang web nào được phát triển trên bất kỳ Nền tảng Web nào như ASP. NET, PHP, Django, Ruby On Rails (RoR), Express. js, Angular, React, Vue, Blazor và hơn thế nữa

Bằng cách viết mã Javascript thuần túy, JSPrintManager cho phép bạn dễ dàng gửi dữ liệu thô, văn bản và lệnh gốc cũng như các định dạng tệp đã biết (như PDF, TIFF, TXT, DOC, XLS, JPG, PNG) tới bất kỳ máy in nào được cài đặt hoặc có sẵn tại máy khách . Quét tài liệu và hình ảnh cũng được hỗ trợ

Thêm chi tiết về JSPrintManager

Đặc trưng

In dữ liệu thô

Gửi bất kỳ lệnh và dữ liệu thô nào được máy in khách hỗ trợ như EPSON ESC/POS, HP PCL, PostScript, Zebra ZPL và Eltron EPL, v.v. Nhãn vận chuyển được tạo bởi các dịch vụ bưu chính như UPS, FedEx, USPS, DHL cũng như các tệp PRN cũng được hỗ trợ

In PDF nâng cao

In các tệp PDF mà không yêu cầu Adobe Reader hoặc bất kỳ phần mềm bên ngoài nào khác. Cài đặt in PDF nâng cao bao gồm Tên khay, Kích thước giấy, Xoay bản in, Phạm vi trang, In hai mặt, Bảo vệ bằng mật khẩu, v.v.

In hình ảnh & tài liệu

Ngoài các lệnh in thô, bạn cũng có thể sử dụng giải pháp JSPrintManager để gửi và in các định dạng tệp đã biết như PDF, TXT, DOC/x, XLS/x, JPG, PNG, v.v. PDF, TXT, PNG, JPG và BMP được hỗ trợ nguyên bản;

In DOC nâng cao

In thầm các tệp DOC với cài đặt In nâng cao bao gồm các tệp được bảo vệ bằng mật khẩu, In hai mặt thủ công, Phạm vi trang, v.v. Chỉ dành cho Windows, yêu cầu MS Word 97+

In XLS nâng cao

In thầm các tệp XLS với cài đặt In nâng cao bao gồm các tệp được bảo vệ bằng mật khẩu, Phạm vi trang, v.v. Chỉ dành cho Windows, yêu cầu MS Excel 97+

In TIFF nhiều trang nâng cao

In thầm các tệp hình ảnh TIFF nhiều trang với các cài đặt In nâng cao bao gồm Tên khay, Kích thước giấy, Xoay bản in, Phạm vi trang, Xoay tự động, Căn giữa tự động, In hai mặt, v.v.

In tập tin với mật khẩu

In các tệp PDF, DOC và XLS được bảo vệ bằng mật khẩu. Tệp được bảo vệ bằng mật khẩu được đặt ở phía máy chủ và mật khẩu để mở khóa tệp được mã hóa và nhúng vào tệp như một phần siêu dữ liệu của tệp

Quét tài liệu và hình ảnh trên web

Quét tài liệu & hình ảnh qua mọi thiết bị tương thích TWAIN/WIA/SANE chỉ định các cài đặt như Độ phân giải DPI, Chế độ pixel (Thang độ xám, Màu, Đen trắng) và Định dạng hình ảnh đầu ra (JPG, PNG, TIF & PDF). Trong Windows, các tính năng Duplex & Feeder (ADF) cũng được hỗ trợ

Khay/Ngăn & Khổ giấy

Nếu máy in được cài đặt trong hệ thống máy khách thông qua Trình điều khiển Máy in, thì bạn có thể chỉ định Tên Khay sẽ gửi lệnh in và chỉ định Khổ giấy nếu muốn. Các định dạng tệp được tính năng này hỗ trợ là PDF, JPEG, PNG, BMP & TXT

Giao tiếp nối tiếp BIDI

Hỗ trợ giao tiếp cổng nối tiếp hai chiều. Gửi/Ghi & Nhận/Đọc chuỗi dữ liệu tới bất kỳ cổng RS-232, COM & TTY nào có sẵn trên hệ thống máy khách

Giao thức TCP/IP BIDI

Hỗ trợ truyền thông TCP/IP hai chiều. Gửi/Ghi & Nhận/Đọc dữ liệu tới bất kỳ Địa chỉ TCP nào và cổng có thể truy cập được từ hệ thống máy khách. Địa chỉ yêu cầu phải nằm trong danh sách cho phép của khách hàng

Nhận thông tin & trạng thái máy in

Bên cạnh việc nhận danh sách các máy in đã cài đặt có sẵn trong máy khách, bạn cũng có thể biết thêm chi tiết như Độ phân giải DPI, Tên cổng, "Được kết nối", "Được chia sẻ", "Là cục bộ", "Mạng", "Là ảo hay thực

Người theo dõi máy in

Phát hiện khi máy in mới được thêm vào, khi máy in bị xóa/xóa và khi có bất kỳ thay đổi hoặc sửa đổi nào được thực hiện trên bất kỳ máy in nào có sẵn tại máy khách. chỉ cửa sổ

Nhận Trạng thái Công việc In

Theo dõi trạng thái lệnh in khi nhắm mục tiêu bất kỳ máy in khách hàng nào đã cài đặt. Được thông báo lệnh in đã hoàn thành hay chưa, số lượng trang đã in và nhiều thông tin liên quan khác

Chế độ máy chủ in

JSPrintManager có thể được cài đặt và định cấu hình dưới dạng dịch vụ in chuyên dụng trên Máy tính để bàn, Máy chủ hoặc Thiết bị nhất định chạy HĐH Windows, Linux, macOS/OSX hoặc Raspberry Pi

In từ thiết bị di động và hộp cát

Với JSPrintManager ở Chế độ Máy chủ In, các ứng dụng khách như thiết bị di động/hộp cát (chạy iOS, Android, ChromeOS. ) và các môi trường Terminal Services/Citrix sẽ có thể in từ trang web của bạn. Hữu ích cho Thanh toán di động, POS di động, Đặt hàng di động, v.v.

In tới bất kỳ máy in nào

In cho bất kỳ thương hiệu và loại máy in của khách hàng. Máy in mã vạch nhãn nhiệt, máy in hóa đơn POS, máy in tác động, máy in vé, máy in RFID, ma trận điểm, máy in 3D, v.v.

Nhận thông tin máy in

Bên cạnh việc nhận danh sách các máy in đã cài đặt có sẵn trong máy khách, bạn cũng có thể biết thêm chi tiết như Độ phân giải DPI, Tên cổng, "Được kết nối", "Được chia sẻ", "Là cục bộ", "Mạng", "Là ảo hay thực

Kích thước khay & giấy

Nếu máy in được cài đặt trong hệ thống máy khách thông qua Trình điều khiển Máy in, thì bạn có thể chỉ định Tên Khay sẽ gửi lệnh in và chỉ định Khổ giấy nếu muốn. Các định dạng tệp được tính năng này hỗ trợ là PDF, JPEG, PNG, BMP & TXT

Giao tiếp máy in

Hỗ trợ kết nối máy in khách hàng. máy in đã cài đặt thông qua Trình điều khiển máy in (đối với kết nối USB), Máy in dùng chung, Cổng song song (LPT) hoặc Cổng nối tiếp RS-232 (COM) cũng như máy in Mạng IP/Ethernet. Trên Linux & Mac OS, mọi loại máy in được cài đặt qua CUPS đều được hỗ trợ

Bất kỳ nền tảng web nào

Dựa trên mã Javascript thuần túy, JSPrintManager. js có thể được sử dụng trong mọi Nền tảng web như ASP. NET, PHP, Django, Ruby On Rails (RoR), Express. js cũng như trong bất kỳ Web Framework nào như Angular hoặc React

Máy khách đa nền tảng

Bất kỳ nền tảng Máy khách nào cũng có thể in từ Trang web của bạn. Ứng dụng JSPrintManager hỗ trợ các thiết bị Windows, macOS / OS X, Linux & Raspberry Pi (Linux ARM). Đó là một Ứng dụng khách rất nhỏ không có phụ thuộc bên ngoài. Không ActiveX, Không Flash, Không Silverlight, Không Java, Không. Nền tảng NET

Thành phần JSPrintManager

• Thành phần trang web (JSPrintManager. js) là một đối tượng Javascript được sử dụng trong trang web để tạo "Công việc in của khách hàng"

• Thành phần phía Máy khách là một ứng dụng gốc nhẹ (không có bất kỳ phần phụ thuộc nào) xử lý tất cả "Công việc In của Máy khách" do đối tượng Javascript tạo ra. Ứng dụng JSPrintManager có thể được cài đặt trên Windows, Linux, Mac & Raspberry Pi. Tải xuống ứng dụng JSPrintManager

Cách sử dụng JSPrintManager - Mã mẫu

Phản ứng mẫu (Trực tuyến Demo)

Repo GitHub này chứa mã nguồn của Trang web demo trực tuyến JSPrintManager được viết bằng cách sử dụng ReactJS

mẫu góc

Nếu bạn là một nhà phát triển Angular, thì hãy thử repo mẫu này https. //github. com/neodynamic/JSPrintManager-Angular

Vue Sample

Nếu bạn là nhà phát triển Vue, thì hãy thử repo mẫu này https. //github. com/neodynamic/JSPrintManager-Vue

Bất kỳ khung JS nào khác

Nếu bạn đang sử dụng một khung Javascript khác, vui lòng tham khảo các bài viết khác nhau về JSPrintManager và các chủ đề in ấn khác nhau được viết bằng mã Javascript đơn giản

Làm cách nào để in trực tiếp tới máy in bằng JavaScript?

Bạn có thể in bằng JavaScript không?

Có thể làm gì với khách hàng

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