从JS设置打印首选项

fro*_*sty 18 javascript javascript-events

所以...从我在谷歌上找到的,我找不到使用Javascript来设置我的打印首选项的方法(阅读:边距,方向,页脚等).

我即将告诉我的老板他不想做什么.我想检查一下,你会不会让人们做这件事.请告诉我.

我发现在FF中你可以使用一些user_pref(key,val)设置来设置用户的偏好,但这对我的90%以上的用户都不起作用.我正在寻找能够覆盖IE(尽可能多),FF和Chrome的东西.

感谢忍者的回复.

fro*_*sty 16

所以...经过一整天的观察,我认为我找到了自己问题的答案.简而言之,答案是JS和/或CSS不允许您覆盖客户端浏览器的默认页面设置.

这是我试过的.如果您使用和空头创建一个简单的HTML文件,并且只包含文本"Test"的正文,您将能够看到我测试的内容.

  1. 打印样式表无法解决您的问题.将主体上的边距设置为0px 0px 0px 0px与单击文件>页面设置并将所有边距设置为0不同.尽管Print Style Sheeters希望您相信它们,但它们是不同的.亲自试试吧.这就是打印样式表无法解决问题的原因.

  2. JS无法解决您的问题.如果您访问的每个页面都修改了本地JS属性,您能成像吗?允许每个页面访问本地打印设置将是一个安全漏洞,是不允许的.因此,JS无法解决您的问题.

我希望有人在这里回复,让我知道我错了.否则......这很糟糕......而且它需要发生.我有很多老用户......让他们在页面设置中设置边距是一件痛苦的事.此外,客户不希望我们重构页面,以便他们不需要.我介于摇滚和硬地之间.

  • 您必须尝试@page{},而不是打印媒体查询和默认页面{}。它对我有用,我希望它也对你有用。对于页面首选项,您可以设置 div 元素的高度和宽度(以毫米为单位),例如 A4 纸为 210 毫米 × 297 毫米等,然后根据您需要的页面将内容放入此 div 元素中。 (3认同)

Jam*_*all 13

您可以使用CSS设置页面方向和边距:

@page {
   size: landscape;
   margin: 10%
}
Run Code Online (Sandbox Code Playgroud)

您还可以使用该<tfoot>元素在每个页面的底部设置页脚.

编辑:正如Beejamin所指出的,这是一个中途宿舍.您无法真正更改打印机首选项(单击"打印"时出现在"打印"对话框中的首选项).此外,IE严重缺乏对@page选择器的支持,(看看IE9是否支持它并且找不到任何东西).作为替代方案,您可以尝试将其应用于打印样式表中的正文.

body {
   size: landscape;
   margin: 10%
}
Run Code Online (Sandbox Code Playgroud)

虽然不在我的脑海,但我不确定这是多么有效.


Ben*_*ull 8

我认为尝试在 HTML 和 CSS 中执行此操作非常不走运。问题的一个重要部分是打印机边距都是特定于打印机类型的:大多数打印机都有可以设置的最小边距(相当于它们夹持页面所需的空间以及打印头的左/右移动)。

可接受的边距也会根据纸张尺寸而变化(较小纸张上的边距通常会小于打印机可接受的最大边距)。例如,如果将 A5 纸张装入 A4 打印机,则可以设置的边距将与装入 A4 纸张时不同。

这些信息都无法通过 CSS、JavaScript 或任何其他方式提供给网页。

现在,就解决方案而言,PDF 文件确实允许您在文件中嵌入一些打印机默认设置 - Acrobat pro 将允许您指定缩放选项、默认份数等。我不介意打赌有Acrobat 不公开的文件格式提供更多潜在设置。

无论您使用哪种服务器端技术,都有大量功能齐全的 PDF 生成工具。好的甚至允许您提供 URL,并将 HTML+CSS 渲染为 PDF 内容 - 这将在某种程度上自动生成。不过,PDF 生成非常消耗 CPU 资源,而且对用户来说也不是无缝的(并且大多数浏览器都需要 PDF 插件)。

我知道这并不理想,但这是我要研究的途径。祝你好运!


小智 7

您可以更改一些首选项。

喜欢方向:

@media print {
    @page {
        size: A1|A4|A5 landscape; /* auto is default portrait; */
    }
}
Run Code Online (Sandbox Code Playgroud)

要隐藏默认设置生成的页脚和页眉文本,您可以执行以下操作:

@media print {
    @page {
        margin: 0 !important;
    }

    body {
        padding: 75px; /* This will act as your margin. Originally, the margin will hide the header and footer text. */
    }
}
Run Code Online (Sandbox Code Playgroud)

我认为您还可以在页眉和页脚部分添加一些文本,但尚未尝试。你可以参考这里。https://www.w3.org/TR/css-page-3/#at-ruledef-right-top