打印页面为div大小

我正在开发一个应用程序来设计海报，此刻我一直在思考CSS，并写了一个小示例，以了解如何以不同的方向输出标准页面大小。打印页面为div大小

我需要在购物详情页面显示预览窗口，然后在以后的阶段生成的DIV一个PDF（大约后来想）

我被困在如何缩小页面，翻译成像素。是否有任何JS库可用于将A4页面（21厘米/29.7厘米）@ 300dpi转换为div最大宽度500px @ 72dpi？我期望大约20个不同大小的页面。

我已经在打印或Web工作，但试图加入他们有点混乱。我在A4，A3和A5的CSS中有一个基本的A4，A3页面的代码片段。

body { 
 
    background: rgb(204,204,204); 
 
} 
 
page { 
 
    background: white; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 0.5cm; 
 
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); 
 
} 
 
page[size="A4"] { 
 
    width: 21cm; 
 
    height: 29.7cm; 
 
} 
 
page[size="A4"][layout="portrait"] { 
 
    width: 29.7cm; 
 
    height: 21cm; 
 
} 
 
page[size="A3"] { 
 
    width: 29.7cm; 
 
    height: 42cm; 
 
} 
 
page[size="A3"][layout="portrait"] { 
 
    width: 42cm; 
 
    height: 29.7cm; 
 
} 
 
page[size="A5"] { 
 
    width: 14.8cm; 
 
    height: 21cm; 
 
} 
 
page[size="A5"][layout="portrait"] { 
 
    width: 21cm; 
 
    height: 14.8cm; 
 
} 
 
@media print { 
 
    body, page { 
 
    margin: 0; 
 
    box-shadow: 0; 
 
    } 
 
}

<page size="A4"></page> 
 
<page size="A4"></page> 
 
<page size="A4" layout="portrait"></page> 
 
<page size="A5"></page> 
 
<page size="A5" layout="portrait"></page> 
 
<page size="A3"></page> 
 
<page size="A3" layout="portrait"></page>

来源

2017-08-16 RedCrusador

所有你应该需要的是为每个页面尺寸准确的宽度和高度比例。然后使用相对/百分比定位，您可以记录放置元素的位置，并在编辑完成后转换为打印DPI尺寸。 –

我认为获取比例是很容易的部分，它试图将其转换为DPI是我卡住的部分。 – RedCrusador

由于没有这里的答案是什么，我发现了自己;

A4 @ 300 dpi是 21厘米厘米x 29.7厘米 8.268英寸X11.693英寸现在我的突破是使用英寸的页面大小在屏幕上，我们使用DPI - 每英寸点数。从公制页面转换为英制DPI会让事情变得更加混乱（尽管它完全可以转换单位）

所以很简单;

72 dpi (screen resolution) X 8.268 inch (page width) = 595.296px 
72 dpi (screen resolution) X 11.693 inch (page width) = 841.896px

要转换成打印准备打印，我们需要扩展到300 DPI为72进入，我们需要乘以这多少让原始尺寸300 4.166666666666667倍;

595.296px x 4.166666666666667 = 2480.4px 
841.896px x 4.166666666666667 = 3507.9px

在CSS我可以使用变换CSS命令以减小div的大小成比例，以适应在一个500像素的空间，并使用该用于流体的布局设计，这将两个方向上缩小。

来源

2017-08-22 14:16:09 RedCrusador

打印页面为div大小

回答

相关问题