javascript - 如何在 html/javascript 中设置打印预览的比例？

Question

当我打印网页时，如果将比例设置为 100，则无法在预览中显示整个页面。如果我将比例更改为 70，我可以看到整个页面。我想知道我是否可以在 HTML/Javascript 中设置比例参数。

我尝试了 transform: scale(0.7) , 但是它不会改变 <div>尺寸。

Answer 1

您可以使用 CSS 通过添加打印媒体规则并指定比例因子来实现此目的，如下所示:

    @media print {
    body {
        margin-top: 5px;
        margin-left: 10px;
        transform: scale(0.43);
        transform-origin: 0 0;
    }
}

以防万一您想使比例因子动态化，那么您可能需要如下使用动态变量并从 js 或 html 链接传递它，如下所示，其中“比例因子是变量”:

@media print {
    body {
        margin-top: 5px;
        margin-left: 10px;
        transform: scale(var(--scale-factor));
        transform-origin: 0 0;
    }
  }