Tôi đang duy trì một Ứng dụng web được tạo bằng cách sử dụng GWT và được sử dụng trong lịch sử để làm việc trong Google Chrome.Tại sao Google Chrome không in các đường viền ô và bảng và các màu nền của ô?
Có một số "báo cáo" có thể được trích xuất từ hệ thống. Cách này được thực hiện như sau: đầu tiên, html cho báo cáo được tạo và hiển thị trong một phần của màn hình (hoạt động chính xác). Sau đó, có một nút cho phép in báo cáo. Hành động này tạo ra html với thông tin (trong một bảng html) giống như cách nó sẽ tạo báo cáo trên màn hình và sử dụng nó để tạo tệp html sau đó được gửi để in.
Đây là nơi quái vật thể hiện khuôn mặt của nó! (tum-dum-dummmm - nhạc kịch).
Vì Google Chrome được cập nhật thành verssion 59.0.3071.86, khi in, bảng/ô bị mất đường viền và màu nền.
Tôi nghĩ có lẽ nó đã comething để làm với html tạo ra, nhưng trên thực tế nếu tôi buộc html khi in ấn là
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;}</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
bảng vẫn không được in một cách chính xác (và điều này được nhìn thấy cũng trong bản xem trước bản in của Chrome (có, ngay cả với tùy chọn in hình nền được chọn)). Điều tương tự cũng xảy ra nếu tôi tạo kiểu bảng trên chính thẻ của bảng. Một cái gì đó như:
<table style="border: 1px solid black !important;">
tôi ra khỏi những ý tưởng, vì vậy tôi yêu cầu nếu ai đã vào một vấn đề tương tự, hoặc có bất kỳ ý tưởng về những gì tôi có thể thử.
Xin cảm ơn trước.
Và chỉnh sửa để nói rằng đây không phải là vấn đề tương tự như vấn đề trong "trùng lặp có thể có". Tôi đã có vấn đề "màu nền" trong quá khứ, và tôi đã sửa nó. Trong trường hợp này (và như đoạn mã cho thấy) có vẻ như một số kiểu không được hiểu, ví dụ như đường viền bảng. Và mọi thứ đã hoạt động trước chrome 59.0.3071,86, do đó, nó có vẻ là một vấn đề mới, không phải là một "giải quyết một nơi nào đó trong một khoảng 5 năm" một.
Tuy nhiên khác chỉnh sửa để giải thích thêm một chút:
đâu đó trong webapp của tôi, có một nút nhỏ mà đọc "báo cáo in". Điều này tạo ra một tập tin html mà sau đó được gửi để in. Tôi đã thay thế html được tạo bằng một cách khá đơn giản để khắc phục sự cố của tôi. Vì vậy, mỗi khi tôi nhấn "In báo cáo", tôi "lực lượng" này là html tạo:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Chú ý cách tôi sử dụng
body { -webkit-print-color-adjust: exact; }
Ngoài ra, tôi đã thử một số biến thể như styling bảng như:
<table style="border: 1px solid black !important;">
Hoặc cơ thể như
<body style="-webkit-print-color-adjust: exact;">
tôi sẽ chỉ cần thêm một hình ảnh từ một "html nền tảng thử nghiệm" để hiển thị như thế nào html mặt ở khắp nơi của tôi sẽ hiển thị:
Tuy nhiên, khi xem trước khi in "bật", đây là những gì tôi nhận được:
vì vậy, cũng như thế với màn hình backgound màu (như tôi tin rằng sẽ xảy ra để SO người dùng khác, nhưng với giải pháp của họ không làm việc ở đây) cũng không biên giới bảng.
chỉnh sửa khác: Tôi cố gắng xác định "quy tắc css in cụ thể", như sau:
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
body { -webkit-print-color-adjust: exact; }
table, th, td {border: 1px solid black !important;}
}
</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor=\"#FF0000\">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
nhưng tôi nhận được kết quả tương tự như trước đây. Ngoài ra (và có thể điều này là có liên quan ... và có thể nó không phải là) nếu tôi xác định, ví dụ, chiều rộng bảng, kiểu dáng THAT được hiển thị chính xác khi in, trong khi đường viền bảng vẫn bị ẩn/không hiện diện/loại bỏ một cách kỳ diệu (chọn một).
CUỐI CÙNG EDIT - workaround: tôi đã không thể giải quyết vấn đề cho mỗi gia nhập, và tôi thực sự thực sự không hiểu tại sao nó xảy ra. Những gì tôi có thể làm là giải quyết sự cố và tôi đăng nó ở đây không phải là câu trả lời, nhưng vẫn nhảy nó có thể giúp ai đó:
Cách tôi làm là: khi tôi nhấn nút in , Tôi mở một cửa sổ mới chỉ có html mà tôi muốn in (chính xác như tôi muốn nó in), và sử dụng javascript tôi làm cho nó in sau khi trang được tải. Bằng cách này nó hoạt động, và nó in với định dạng chính xác.
Một số người có thể nói đó là may mắn, một số khác là "ma thuật đen". Tôi nói "Xong! Tiếp theo!" (Tôi không hài lòng với thực tế là tôi không hiểu vấn đề này ngay từ đầu).
có thể trùng lặp của [In màu nền trong Chrome] (https://stackoverflow.com/questions/2392366/print-background-colours-in-chrome) –
Chỉ cần ngày hôm qua chứng kiến sự cùng [câu hỏi quá] (https://stackoverflow.com/questions/44571567/print-angular-webpage-with-css-styling-applied-to-it) –
Nó không phải. Nhưng dù gì cũng cảm ơn. – camilo