1、在视图中，将页面设置为“分页预览” 2、将蓝色实线边框内的虚线，拉倒边框上。 3、点击“打印预览”查看效果，已经显示为一页了。
主要是为了打印 <pre> 里面的内容，为了方便使用，现在把它写成了一个 prototype 形式的 jQuery 插件，支持当前 5 大浏览器。
【插件】
(function($) {
$.fn.printMe = function(text_only) {
// 获取元素内容
var content = text_only ? $(this).text() : $(this).html();
// 在页面创建 iframe
$("body").append('<iframe id="iframe-print" style="display: none;"></iframe>');
// 获取 iframe window
var ifrm = $("#iframe-print")[0].contentWindow;
// 将内容写入 iframe
ifrm.document.write(content);
// IE
if(navigator.userAgent.match(/MSIE/)) {
ifrm.document.execCommand("print", false, null);
}
// Opera
else if(navigator.userAgent.match(/Opera/)) {
// Opera 需要打开新窗口
var printWin = window.open(""), printDoc = printWin.document;
printDoc.open();
printDoc.write('<!DOCTYPE html><html><head></head><body onload="window.print(); window.close();">' + content + '</body></html>');
printDoc.close();
}
// Firefox/Chrome/Safari/其它浏览器
else {
ifrm.print();
}
// 释放 cache
ifrm = null;
// 移除 iframe
$("#iframe-print").remove();
};
})(jQuery);
【用法】
$( 要打印的元素 ).printMe( 只打印text选项 );
要打印的元素：指定 id 或 class，也就是你说的要打印的指定区域。
只打印text选项：如果指定为 true 或 1，将会把指定元素内的 html 全部忽略，也就是打印区域内的 .text()。默认为 false，也就是打印区域内的 .html()。
【实例 1】
$("#print_div").on("click", function() {
$("#div").printMe();
});
<div id="div"><p style="color: #f00;">文字段落</p><em>斜体文字</em></div>
<a id="print_div">打印 div 中的 html</a>
此例将打印 div 中的 p 和 em。
【实例 2】
$("#print_div_text").on("click", function() {
$("#div").printMe(1);
});
<div id="div"><p style="color: #f00;">文字段落</p><em>斜体文字</em></div>
<a id="print_div_text">打印 div 中的 text</a>
此例将忽略 div 中的 p 和 em，只打印 text。