仅打印文本区域

问题描述 投票:0回答:7

我想打印网站页面中textarea元素的内容。 特别是,我想确保文本区域的边界不会剪切任何内容,因为内容会很大。

解决这个问题的最佳策略是什么?

javascript printing textarea printing-web-page
7个回答
6
投票

制作一个打印样式表,其中所有元素(除了文本区域)在 CSS 中设置为显示:无;对于文本区域,溢出:可见。

将其链接到页眉中的链接标记设置为 media="print" 的页面。

你已经完成了。


3
投票
使用设置为打印的媒体制作不同的 CSS

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

http://webdesign.about.com/cs/css/a/aa042103a.htm


2
投票
如果用户单击“打印”,您可以打开一个新窗口,其中仅包含空白页上文本区域的内容,并从那里开始打印,然后关闭该窗口。

更新:我认为所建议的CSS解决方案可能是更好的策略,但如果有人喜欢这个建议,他们仍然可以投票。


1
投票
我会选择其他建议的组合。

不要使用样式表覆盖来取消整个页面的打印按钮,而是在文本区域旁边提供一个按钮,让用户仅打印这些内容。

该按钮将打开一个新窗口,其中包含菜单/镶边等,并仅克隆文本区域内容(和/或提供打印 CSS 文件)


1
投票
我制作了一个印刷媒体 CSS 来隐藏一些字段。 由于我使用动态创建 IFRAME 的 nicEdit,问题变得更加复杂。 因此,我必须添加一个事件,该事件接受 onblur 事件并将它们复制到隐藏的(打印除外)Div。 “divtext”是隐藏的 Div,“storyText”是 TextArea。

textarea { display: none; } */ #divtext { display: block; } div, DIV { border-style: none !important; float: none !important; overflow: visible !important; display: inline !important; } /* disable nearly all styles -- especially the nicedit ones! */ #nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame { display: none !important; } /*hide Nicedit buttons */ .nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt { display: none !important; }

nicEdit 的 javascript 代码:

<script type="text/javascript" src="/media/nicEdit.js"></script> <script type="text/javascript"> bkLib.onDomLoaded(function () { var nic = new nicEditor({ fullPanel: true }).panelInstance('storyText'); document.getElementById("storyText").nic = nic; nic.addEvent('blur', function () { document.getElementById("storyText").value = nic.instanceById('storyText').getContent(); document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent(); }); }); </script>
    

0
投票
是否溢出:可见; on textarea 实际上对你们中的任何人都有效吗? FF3 似乎忽略了打印表中文本区域的规则。并不是说这是一个错误或其他什么。


0
投票
已经晚了,但是...

我和OP有同样的问题。我的方法是抓取文本区域,创建一个仅包含文本区域的新选项卡/窗口,添加一个打印按钮并将其从实际的硬拷贝中隐藏。它很混乱且迂回,但它应该在任何情况下都有效。

function Print () { var body = document.getElementById("journal-entry").value; // grab the textarea var winContents1 = '<!doctype html> <html lang="en"><head> <meta charset="utf-8"/> <link rel="shortcut icon" ' + 'href="Include/favicon.ico"> <title> General Notes </title>' + '</head> <body id="Body"> ' + "<style type='text/css'> @media print { @page { margin-left: 0.5in; margin-right: 0.5in; " + "margin-top: 0; margin-bottom: 0; } #printPB { display: none; } } </style> <pre>\n"; var winContents2 = "\n</pre> <button id='printPB' onclick='window.print()'" + ">Print General Notes</button> </body> </html>"; var w = window.open('about:blank'); w.document.open(); w.document.write(winContents1 + body + winContents2); w.document.close(); }
    
© www.soinside.com 2019 - 2024. All rights reserved.