javascript - 打印/预览忽略我的 Print.css

标签 javascript html css django

我有一个问题让我有些头疼。我正在尝试打印一份报告并使用 print.css 正确格式化它,但它每次都完全忽略我的 css。以前有人遇到过这个问题吗?我确保 CSS 文件位于正确的目录中,等等,但仍然没有成功。

这是我的模板:

注意:我使用 javascript 来控制打印按钮,并且在 javascript 中包含了 CSS 链接。我也曾尝试将其仅放在 HTML 页面上,但这没有帮助。

...
<script type="text/javascript">

function printContent(id){

   str=document.getElementById(id).innerHTML
   newwin=window.open('','printwin','left=100,top=100,'+
                         'width=900,height=400, scrollbars=1')
   newwin.document.write('<HTML>\n<HEAD>\n')
   newwin.document.write('<TITLE>Print Page</TITLE>\n')
   newwin.document.write('<link rel="stylesheet" type="text/css" '+
                         'href="/media/css/print.css" media="print"/>\n')
   newwin.document.write('<script>\n')
   ...

现在对于这个元素,我使用的是 Ubuntu 10.10 和 Firefox 7。如果这有帮助的话。

编辑

我为 Firefox 安装了 Web 开发人员工具栏。它允许您将页面视为不同的媒体。现在,当我点击打印时,它会显示我所有的样式更改,但当我打印时,它不会跟随它们。

最佳答案

<html>
    <head>
        <title>your website title</title>
        <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
        <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
    </head>
    <body>
        <input type="button" value="Print" onClick="javascript:window.print();" />
    </body>
</html>

也许您可能想试试上面的 HTML 模板,看看它是否适合您或适合您的需要。

在我看来,您建议的功能实际上最好在服务器端而不是客户端使用 javascript 编写,因为您正试图在其中动态生成 html 页面。您可以将该页面输出为 print.html 或其他内容,一旦它被发送到客户端,您就可以应用 print.css 样式并进行打印。无论如何,这里只是一些想法,希望它对您的情况有所帮助。干杯。

关于javascript - 打印/预览忽略我的 Print.css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7612794/

相关文章:

html - 在 Opera 中隐藏/删除输入数字箭头

html - 我怎样才能阻止我的 div 滚动?

css - Bootstrap Web 模板 : How to stick the footer element to the bottom of the page?

javascript - 带空格的电话号码验证

javascript - 如何先显示动画再alert

javascript - 如何设置一个工厂函数来实现它在Typescript中生成的类的参数调用签名?

javascript - 使用 js 更改输入 slider 的颜色渐变?

php - 如何更改链接的样式表?

javascript - 可选链接在 create-react-app 中不起作用

javascript - JS中如何映射数组