打印頁面爲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大小

回答

相關問題