打印 HTML DIV 的克隆

Question

我希望能够设计一个 'flyer' 类型的 HTML 页面，具有特定的设置高度和宽度，并能够将其打印在 sheet 纸上.我使用的是普通信纸，并将其尺寸设置为 div。但是，在浏览器中打印后，div 具有设置的背景颜色，打印弹出窗口中没有显示任何内容，因为它认为它是空白的。我还担心如果我设置某些文本的样式，打印会弄乱 CSS。我怎样才能完美地克隆 div 以像 html2canvas 一样打印？

<!DOCTYPE html>
<html>
    <body>
        <div style="height:1054px;width:816px;background-color:red;position:absolute;top:0;left:0">

        </div>
    </body>
</html>

Answer 1

嘿，有一种方法可以使用 @media print 来表示您想打印一些东西。但真正的魔法是“webkit-print-color-adjust”表示：“打印背景！” :)

@media print {
    div {
        background-color: #red !important;
        -webkit-print-color-adjust: exact;
    }
}

打印 HTML DIV 的克隆

Printing Clone of HTML DIV

html

javascript

css

printing

html2canvas