30/09/2018, 21:43

Cách in website ra giấy A4

Các bác cho e hỏi
khi e nhấn ctrl+p trên bàn phím thì page in ra không giống với những gì mình định dạng trên site
vậy làm thể nào để in ra cho đúng theo định dạng trên site ạ?
e cảm ơn

Chi Ngo viết 23:52 ngày 30/09/2018

Màn hình có phải là cỡ A4 đâu mà giống nhau được

dihocke viết 23:58 ngày 30/09/2018

nó mất hết css bác ạ, e để nền đỏ chẳng hạn, hoặc cho chữ vào giữa, khi in ra dường như chỉ còn html thôi thì phải :’)

Dzu viết 23:49 ngày 30/09/2018

xài mấy extensions chụp trang web của chrome ý, sau đó đưa ảnh qua word, căn chỉnh rồi in thôi

dihocke viết 23:51 ngày 30/09/2018

mình tính làm cái để người dùng bấm print sẽ in ra được khổ A4 luôn dó bác :’)
chứ phải chuyển sang word rồi căn chỉnh thì thà là bằng word luôn cho r

Võ Hoài Nam viết 23:47 ngày 30/09/2018

In trực tiếp từ trình duyệt rồi nhấn Ctrl + P có vấn đề đó bác. Bạn phải chỉnh CSS riêng cho vụ in này. À mà lưu ý. Khi bạn chỉnh CSS riêng cho vụ in thì những gì bạn thấy trên trình duyệt bình thường nó không giống như lúc in đâu. Chịu khó mỗi lần chỉnh là mỗi lần nhấn Ctrl + P để coi lại

dihocke viết 23:44 ngày 30/09/2018

Chỉnh như thế nào vậy bác :’)
e có tham khảo trên mạng thấy bảo dùng @media print mà e dùng nó cũng k đc :’)

Võ Hoài Nam viết 23:53 ngày 30/09/2018

Ở dự án của mình, thì lúc in phải xuất ở một trang khác nên không đụng tới thằng @media print.

Bạn thêm thử dòng này cho thẻ <body> thử.

body {
    -webkit-print-color-adjust: exact; 
}

dihocke viết 23:54 ngày 30/09/2018

vẫn k đc bác ạ :’(
có demo này http://jsfiddle.net/mturjak/2wk6Q/1949/
mà khi tạo file để thử trên máy thì lại k đc, dù đã làm giống hệt trên đó :’(
k biết có thiếu gì k nữa

Võ Hoài Nam viết 23:52 ngày 30/09/2018

Mình viết thế này. Đặt trong cùng một thư mục. Vẫn xài code của bạn, không chỉnh sửa gì cả.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo Print</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="book">
        <div class="page">
            <div class="subpage">Page 1/2</div>
        </div>
        <div class="page">
            <div class="subpage">Page 2/2</div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

// style.css
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

JavaScript

(function() {

'use strict';

window.print();

})();

The Wind viết 23:59 ngày 30/09/2018

Mình thì in ra PDF sau đó in ra giấy để đọc

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

dihocke

0 chủ đề

0 bài viết

Tác giả nổi bật

Từ khóa nổi bật

AngularJS Blog Bootstrap C / C++ Cấu trúc dữ liệu & Giải thuật Cơ sở dữ liệu Codeigniter Công cụ lập trình CSS CSS cơ bản CSS3 Học Excel HTML HTML cơ bản HTML5 Java Javascript jQuery Json Lập trình mobile Laravel Linux MongoDB MySQL NodeJS Oracle Pascal PHP PHP cơ bản PHP nâng cao Python React Native ReactJS Ruby SEO SQL Server Swift Visual Basic VueJS WordPress XML

Chủ đề nổi bật

Cách in website ra giấy A4

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI