javascript - 通过javascript设置页面横向

Question

我正在尝试通过 javascript 以横向格式打印页面。我在 Landscape printing from HTML 找到了一些解决方案，但那些不符合我的需要。

CSS 片段 @media print{@page {size: landscape}} 工作正常，但我不确定如何通过 javascript/jquery 使其工作。我尝试通过 javascript 执行此操作的原因是因为我想要 2 个按钮进行打印。一个普通的打印按钮可以像显示的那样打印内容，第二个按钮可以稍微改变页面并以横向模式打印。

简而言之:我想在 javascript 中将页面方向(或在 CSS 中称为大小)更改为横向，但 javascript 旋转不起作用，因为它还会旋转页面上的文本。有没有一种方法可以在不使用不同布局/CSS 制作单独页面的情况下实现我正在尝试做的事情？

提前致谢。

Answer 1

您可以将该规则移动到另一个样式表上并在单击时动态添加它:

$("#printLandscape").on('click',function () {
    $('head').append('<link href="printLandscape.css" title="printLandscape" rel="stylesheet" />');
});

我假设您的“横向打印”按钮有一个 printLandscape id。

现在，要确保即使在第一次单击按钮之后用户也能够在正常模式下打印，您可以向“在正常模式下打印”按钮添加另一个监听器:

$("#printNormal").on('click',function () {
    $('link[title="printLandscape"]').attr('disabled', 'disabled').remove();
});

为此，您必须为横向样式表设置一个title(在本例中我称之为printLandscape)