从HTML进行横向打印

我有一个HTML报告，需要打印的景观，因为许多列。是否有一种方法可以做到这一点，而不需要用户更改文档设置?

浏览器中有哪些选项。

当前回答

这是我想到的-添加一个负旋转<html>元素和一个正旋转等于abs值<身体>。这节省了添加大量的CSS样式的身体，它的工作就像一个魅力:

html { 
  transform: rotate(-90deg);
}

body { 
  transform: rotate(90deg);
}

2021-05-02 19:23:28

其他回答

你可以使用css2 @page规则，它允许你将“size”属性设置为横向。

2008-09-26 09:33:47

如果你正在使用React和MUI这样的库，在React应用中使用纯CSS并不是一个好的做法。更好的方法是使用一个名为GlobalStyles的样式组件，我们可以从Material UI导入它。代码是这样的，

import { GlobalStyles } from '@mui/material';
const printStyle = {
  ['@media print']: {
    ['@page']: {
      size: 'landscape',
      margin: '2px',
     },
   },
 };

您可能不需要在@media打印中使用@page，因为@page仅用于打印。文档

页边距将消除浏览器在打印时生成的url。

我们可以在App容器中使用GlobalStyles。像这样

const App: React.FC = () => (
  <>
     <GlobalStyles styles={printStyle} />
     <AppView />
  </>
 );

当我们调用windows.print()时，它将应用上述CSS。如果你在使用MUI之外的其他库，应该有一些组件或插件可以用于全局应用CSS。

2022-09-14 18:01:50

我的解决方案:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

With media="print"只适用于print。这适用于IE, Firefox和Chrome

2014-09-24 20:21:09

我面临的问题可能和你一样。这里的每个人都使用CSS来静态地提供它，但我不得不寻找一个动态的解决方案，这样它就会根据活动元素而改变，而无需重新加载页面。

我创建了两个文件，肖像。css和风景。css。

Portrait.css是空的，但是landscape.css只有一行。

@media print{@page {size: landscape}}

在我的主文件中，我添加了这一行html来指定portrait.css为默认值。

 <link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>

现在，要切换，你只需要改变元素中的href来切换打印模式。

$("#PRINTLAYOUT").attr("href","landscape.css")
  // OR 
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...

这对我来说很有效，我希望它能帮助其他人像我一样做艰难的事情。注意，$表示JQuery..如果你还没有使用它，我强烈建议你现在就开始使用。

2021-09-05 23:30:20

我曾经尝试解决这个问题，但我所有的研究都将我引向了ActiveX控件/插件。浏览器(至少在3年前)没有允许更改任何打印设置(副本数量，纸张大小)的技巧。

我努力提醒用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，这比IE6的要好得多!我们的应用程序在一些报告中有非常宽的数据表，打印预览会清楚地告诉用户什么时候表格会溢出纸张的右边缘(因为IE6也不能处理2张纸的打印)。

是的，人们至今仍在使用IE6。

2009-11-10 16:24:28

从HTML进行横向打印

推荐文章

最新文章

标签