带有水平线的文本区域显示在打印件上

Question

我目前正在开发一个网站，用户可以在该网站上查看客户的机械请求。然后他们可以打印请求。

我正在尝试仅在印刷版本的请求中添加 "notes" 部分。我正在使用 bootstrap，所以在打印之前隐藏它很容易。

我的问题是我想在文本区域中有水平线，就像这个答案一样：<textarea> with horizontal rule

这些线条在文本区域上效果很好。问题是调用 window.print()

时它们没有出现

在页面上：

打印时：

有没有办法让它出现在印刷版上？

<dt class="visible-print">
    Notes
</dt>

<dd class="visible-print">
    <textarea class="notes" rows="10" cols="100"></textarea>
</dd>

.notes {
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 100%, 100% 100%, 100% 31px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 31px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 8px;
}

Answer 1

大多数人将他们的浏览器设置为默认选项 "do not print backgrounds." 深色背景页面会很快耗尽您的墨水！如果您的 "lines" 是利用 "background," 实现的，它们将不会打印。

作为解决方法，请尝试创建独立图像。适当设置它的 z-index（记得使用 position），然后从屏幕上隐藏它 css，只显示它用于打印 css.

Answer 2

在与打印前呈现 <textarea> 的方式类似的情况下已报告过这种情况。一个值得关注的解决方案是将 <textarea> 复制为标准 <div> 或其他元素 before/when 调用打印。

可以在此处找到显示如何使用 jQuery 替换 <textarea> 示例的资源：http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/.

带有水平线的文本区域显示在打印件上

Textarea with horizontal rule showing up on print

html

css

printing

textarea