Question

可以使用

以横向模式打印页面

@page {size: landscape;}

但我只想在满足某些条件时（例如，当页面上有广泛的内容时）以横向打印页面。

如何使用jQuery / JavaScript设置此属性？

什么不起作用

$('@page')
Uncaught Error: Syntax error, unrecognized expression: @page

Answer 1

您的jQuery正在尝试选择一个名为page的元素和无效的选择器@。

您需要做的就是将@page{size: landscape;}添加到CSS

$('head').append('<style>@page{size: landscape;}</style>')

Answer 2

您可以通过styleSheets collection访问规则并更改其大小。

以下是一个示例：CSS声明@page { size: landscape; }，然后代码将其更改为portrait：

＆＃13;

Array.from(document.styleSheets).forEach(ss => {
    Array.from(ss.rules || ss.cssRules).forEach(rule => {
      if (rule instanceof CSSPageRule) {
        rule.style.size = "portrait";
        console.log("New rule size: " + rule.style.size);
      }
    });
});

＆＃13;

@page { size: landscape; }

＆＃13;

该示例将继续查找所有CSSPageRules，但如果您知道只有一个，则可以使用some代替：

Array.from(document.styleSheets).some(
    ss => Array.from(ss.rules || ss.cssRules).forEach(rule => {
      if (rule instanceof CSSPageRule) {
        rule.style.size = "portrait";
        console.log("New rule size: " + rule.style.size);
        return true;
      }
    })
);

如何使用jQuery设置@page CSS属性？

什么不起作用

2 个答案: