Question

我需要显示发票的预览。为此，我必须根据div缩放预览的大小以显示预览。这个div响应就好，如果我们减小窗口的大小，div的大小也会减少，因此我必须根据div缩放预览。

由于发票纸张尺寸以mm为单位，因此我需要以mm为单位得到div的innerWidth，以便我可以获得正确的比例值。

也欢迎任何其他替代方案。在＆＃39; px＆＃39;的情况下，它工作正常，但我需要以毫米为单位获得宽度

                $("#preview").css({
                    border : "1px solid silver",
                    width : "794px",
                    height : "1123px",
                    position : "relative",
                    margin : "auto",
                    boxShadow : "2px 2px 4px silver"
                });

                // Scale preview with screen size
                var updatePreviewScale = function(cssObj){
                    $("#preview").css(cssObj);
                };

                // A4 paper size in pixel : 794px X 1123px
                var scalePreview = function(){
                    var width = $("#preview-container").innerWidth();
                    var expectedWidth = 794;
                    var expectedHeight = 1123;
                    var ratio = width / expectedWidth;

                    if(ratio > 1){
                        return false;
                    }

                    var widthMargin = -(expectedWidth * (1 - parseFloat(ratio)))/2;
                    var heightMargin = -(expectedHeight * (1 - parseFloat(ratio)))/2;

                    var cssObj = {
                            "-webkit-transform" : "scale(" + ratio+ ")",
                            "-moz-transform" : "scale(" + ratio+ ")",
                            "-ms-transform" : "scale(" + ratio+ ")",
                            "transform" : "scale(" + ratio+ ")",
                            "left" : widthMargin,
                            "top" : heightMargin

                    };

                    updatePreviewScale(cssObj);
                };

                scalePreview();

Answer 1

你似乎不理解我朋友的像素概念。

虽然大多数显示器都是基于相同的标准制造的。您不能假设像素具有等效的毫米值。您会看到某些监视器的dots更小。

你可以用一些近似值来制作，但你永远无法确定。 mm仅适用于打印目的。

以下是W3C所说的内容： http://www.w3.org/Style/Examples/007/units.en.html

1px≈0.2645833333333mm

干杯！

Answer 2

您可以轻松获得每毫米的像素数。

function mm2px() {
    var e = document.createElement("div");
    e.style.position = "absolute";
    e.style.width = "100mm";
    document.body.appendChild(e);
    var rect = e.getBoundingClientRect();
    document.body.removeChild(e);
    return rect.width / 100;
}

检查这个小提琴，看看如何使用它： http://jsfiddle.net/oet7L599/

当然，您只需要调用此函数一次并存储结果。

Answer 3

您必须考虑使用媒体print样式表。

这样您就可以使用mm覆盖打印样式。

你有很多方法可以实现这一目标。您可以选择以下3个中的一个。请注意，在所有可能性中，您必须在默认css之后定义css打印定义，以覆盖当前值。

在现有CSS声明中导入

代码：

@import("print.css") print;

链接到html中的print css文件

代码：

<link rel="stylesheet" type="text/css" href="print.css" media="print">

使用媒体查询

这是最好的方法

代码：

@media print {
  body {
   font-size:10mm;
  }
}

使用mm中的javascript获取div的innerWidth

3 个答案: