随着网络技术的快速发展，互联网应用越来越广泛，其中网页应用也成为不可或缺的一部分。在很多网页应用中，打印功能是很重要的一项功能，但是在不同的浏览器和操作系统中，打印效果可能会出现差异，因此我们需要进行打印预览，以确保打印效果的准确性。而javascript实现打印预览的方法也越来越受到开发者的关注。
前置知识
在介绍javascript实现打印预览的方法前，我们需要了解一些前置知识：
- window.print()方法
window.print()是javascript自带的方法，主要用于实现打印功能，在调用该方法后，浏览器将直接开始打印当前页面。
- CSS打印样式
在打印预览中，CSS样式也是非常重要的一部分。我们可以通过CSS样式来控制打印页面的布局、字体、颜色等。
立即学习“Java免费学习笔记（深入）”；
- 打印页面尺寸
不同的设备可能有不同的打印纸张尺寸，因此我们需要根据设备的打印纸张尺寸来调整打印页面的布局。
- window.matchMedia()方法
window.matchMedia()是javascript自带的方法，主要用于判断当前设备的显示尺寸。我们可以通过该方法实现针对不同设备显示效果的调整。
实现步骤
有了前置知识的基础，我们就可以开始介绍javascript实现打印预览的方法了。
- 创建打印按钮
首先，我们需要在页面中创建一个打印按钮，使用户可以点击该按钮来触发打印预览功能。按钮代码如下：
<button onclick="printPreview()">打印预览</button>
- 创建打印预览函数
在打印按钮中，我们需要调用一个名为printPreview()的函数来实现打印预览功能。函数代码如下：
function printPreview(){
//创建新的窗口
var printWindow = window.open('', 'printWindow', 'height=600, width=800');
//将样式表和HTML代码添加到新窗口中
printWindow.document.write('<html><head>');
printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
printWindow.document.write('</head><body>');
printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
printWindow.document.write('</body></html>');
//设置新窗口的打印样式和相关属性
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}上述代码中，我们首先创建了一个名为printWindow的新窗口，并将样式表和HTML代码添加到该窗口中。注意，我们在这里使用了一个名为print.css的CSS样式表，该样式表只会在打印时生效。然后，我们设置了新窗口的打印样式和属性，并在屏幕中弹出该窗口进行打印预览。最后，我们在完成打印后关闭该窗口。
- 设置打印样式
在打印预览的函数中，我们已经添加了针对打印的CSS样式表。下面是一个示例的print.css文件的代码，其中包含了一些常用的打印样式：
/*隐藏页面中的所有元素*/
* {
display:none;
}
/*显示需要打印的区域*/
#printContent {
display:block;
}
/*设置打印页面的字体和颜色*/
body {
font-family:宋体, Arial;
font-size:16px;
color:#000;
}
/*为打印页面进行分页*/
.my-pagebreak{
page-break-after: always;
}
/*设置打印页面的边距*/
@media print {
@page {
margin:20mm 15mm !important;
}
}在这里，我们使用CSS将页面中的所有元素都隐藏起来，只显示需要打印的区域。同时，我们设置了打印页面的字体和颜色，并为页面进行了分页和边距的设置。
- 调整页面布局
不同设备的打印纸张尺寸可能不同，因此我们需要根据设备的打印纸张尺寸来调整打印页面的布局。我们可以通过window.matchMedia()方法来判断当前设备的显示尺寸，并据此调整打印页面的布局。代码如下：
function printPreview(){
//创建新的窗口
var printWindow = window.open('', 'printWindow', 'height=600, width=800');
//根据设备的显示尺寸调整页面布局
if (window.matchMedia('print and (max-width: 768px)').matches) {
//设备宽度小于768px，调整页面布局
//...
} else if (window.matchMedia('print and (max-width: 992px)').matches) {
//设备宽度小于992px，调整页面布局
//...
} else {
//设备宽度大于等于992px，调整页面布局
//...
}
//将样式表和HTML代码添加到新窗口中
printWindow.document.write('<html><head>');
printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
printWindow.document.write('</head><body>');
printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
printWindow.document.write('</body></html>');
//设置新窗口的打印样式和相关属性
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}在上述代码中，我们使用了window.matchMedia()方法来判断当前设备的显示尺寸，根据不同的宽度范围调整页面布局。根据实际情况，我们可以自行调整打印页面的布局。
总结
javascript实现打印预览可以使我们更加精细和准确地掌控打印页面的效果，提高了我们的打印体验。需要注意的是，在实现过程中，我们需要根据不同的设备尺寸和浏览器特性来调整样式和布局，以保证打印效果的一致性。同时，我们也可以通过其他技术，如CSS3的@page规则等，来进一步完善打印页面效果的控制。
