问题：

使用javascript打印css样式的内容

文心思

2023-03-14

我有一个特定的页面容器一些信息与特定的设计

此设计存在于单独的页面print.css

我想用同样的样式打印这一页，这一页也包含一个图像

function printContent() {
    var divContents = document.getElementById("terms").innerHTML;
    var a = window.open('', '', 'height=1000, width=1000');
    a.document.write('<html>');
    a.document.write("<link rel=\"stylesheet\" href=\"print.css\" type=\"text/css\" media=\"print\"/>");
    a.document.write('<body >');
    a.document.write(divContents);
    a.document.write('</body></html>');
    a.document.close();
    a.focus();
    setTimeout(function () {
        a.print();
    }, 1000);
    a.print();
}

p {
    display: inline-block;
}

.container header .top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #2c2a6b;
}

.container header .top h1 {
    color: white;
    background-color: #2c2a6b;
    padding: 10px 20px;
    width: fit-content;
    width: -moz-fit-content;
    border-top-left-radius: 20px;
}

.container header .top .print-header {
    display: flex;
    gap: 20px;
}

.container header .top .print-header h2{
    color: #2c2a6b;
    align-self: flex-end;
}

.container header .print-subheader {
    padding: 20px 0;
    color: #2c2a6b;
}

.container main .print-content .top {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2c2a6b;
}

.container main .print-content .top img {
    width: 50px;
}

.container main .print-content .top h3 {
    color: #2c2a6b;
}

.container main .print-content .content{
    margin-top: 20px;
}

.container main .print-content .content .inner-box{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.container main .print-content .content .inner-box p{
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

<body>
    <div class="container" id="terms">
        <header>
            <div class="top">
                <h1>قطاع السياحة</h1>
                <div class="print-header">
                    <img src="images/title-icon.png" alt="title">
                    <h2> اصدار رخصة الإيواء السياحي</h2>
                </div>
            </div>
            <div class="print-subheader">
                <h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
            </div>
        </header>
        <main>
            <div class="print-content">
                <div class="top">
                    <img src="images/terms.png" alt="terms">
                    <h3>الاشتراطات العامة</h3>
                </div>
                <div class="content">

                </div>
            </div>
        </main>
    </div>
    <input type="button" class="btn-print" onclick="printContent()" value="Print">
</body>

问题是，单击“打印”按钮后，图像和样式不会显示

在一次搜索之后，我发现我应该设置一个超时，并且应该包括打印内容。css文件与媒体打印，但毕竟问题仍然存在，我不能打印的图像和css风格的任何人都可以帮助请页面

共有2个答案

伍成仁

2023-03-14

对于一个非常简单的需求，这似乎是一个过于复杂的解决方案，但也许有一些细节你没有考虑到。

看起来您只是为了打印而动态地包含CSS文件，但是CSS已经有了这方面的功能。我建议删除所有JavaScript，并将CSS包装到打印媒体查询中，如下所示：

@media print {
    p {
        display: inline-block;
    }

    /* the rest of your styles here */
}

只需将这些打印样式与页面的其他CSS一起包含，浏览器将负责将它们应用于打印媒体。

如果您必须使用JavaScript完成此操作，则需要等待样式表加载完成。您可以通过创建元素，为onload事件附加一个事件侦听器，然后将其附加到DOM中来实现这一点。

比如：

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

澹台锐

2023-03-14

也许这会有所帮助

HTML

<body>
    <div class="container" id="terms">
        <header>
            <div class="top">
                <h1>قطاع السياحة</h1>
                <div class="print-header">
                    <img src="images/title-icon.png" alt="title">
                    <h2> اصدار رخصة الإيواء السياحي</h2>
                </div>
            </div>
            <div class="print-subheader">
                <h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
            </div>
        </header>
        <main>
            <div class="print-content">
                <div class="top">
                    <img src="images/terms.png" alt="terms">
                    <h3>الاشتراطات العامة</h3>
                </div>
                <div class="content">

                </div>
            </div>
        </main>
    </div>
  <button onclick="window.print();" class="noPrint">
Print Me
</button>
</body>

CSS

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

p {
    display: inline-block;
}

.container header .top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #2c2a6b;
}

.container header .top h1 {
    color: white;
    background-color: #2c2a6b;
    padding: 10px 20px;
    width: fit-content;
    width: -moz-fit-content;
    border-top-left-radius: 20px;
}

.container header .top .print-header {
    display: flex;
    gap: 20px;
}

.container header .top .print-header h2{
    color: #2c2a6b;
    align-self: flex-end;
}

.container header .print-subheader {
    padding: 20px 0;
    color: #2c2a6b;
}

.container main .print-content .top {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2c2a6b;
}

.container main .print-content .top img {
    width: 50px;
}

.container main .print-content .top h3 {
    color: #2c2a6b;
}

.container main .print-content .content{
    margin-top: 20px;
}

.container main .print-content .content .inner-box{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.container main .print-content .content .inner-box p{
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

通过添加class=“noPrint”，您可以删除不希望打印出来的内容！如果这是你的想法，请告诉我

这里是codepen.io链接

类似资料：

JavaScript 打印DIV的内容

问题内容：打印DIV内容的最佳方法是什么？问题答案：与早期版本相比有轻微变化-已在CHROME上测试
打印JavaScript对象的内容？

问题内容：通常，如果我们仅使用它，它将显示为。如何在JavaScript中打印对象的所有内容参数？问题答案：如果您使用的是Firefox，则只需进行简单的调试即可。
Javascript仅打印iframe内容

问题内容：这是我的代码此方法有效，但是会打印父页面，我如何才能仅打印iframe？问题答案：我不希望它能起作用试一试和使用或者尝试好老如果jQuery无法破解
使用JavaScript打印JSON

问题内容：如何以易于阅读的格式（对人类读者而言）显示JSON？我主要是在寻找缩进和空格，甚至可能是颜色/字体样式/等等。问题答案：打印是在中本地实现的](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 。第三个参数启用漂亮的打印并设置要使用的间距
使用 CSS 的样式（Style with CSS）

Flex支持使用CSS语法和样式以与CSS到HTML组件相同的方式应用于其UI控件。方式＃1:使用外部样式表文件您可以参考应用程序类路径中可用的样式表。例如，考虑一下Hello com/wenjiangs/client folder World.mxml文件所在的com/wenjiangs/client folder中的Style.css文件。 /* CSS file */ @namespa
使用Javascript添加内联样式

问题内容：我正在尝试将此代码添加到动态创建的div元素中创建动态的代码是我的想法是在之后添加样式，但我不知道该怎么做。问题答案：这应该向元素添加内联样式。

使用javascript打印css样式的内容

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档