前端实现打印功能（转）

首先说结论，现在利用前端来实现打印或到处PDF功能，实现起来并不完美，最好的方法还是让后端来处理，前端将html代码传给后端，后端利用wkhtmltopdf或其他工具来实现打印功能。如果求速度，打印页面可以自己设置的话，可以考虑前段打印。

前端实现打印功能，主要是借助浏览器的打印功能Ctrl + P实现。比如在谷歌浏览器页面手动Ctrl + P都能将当前页进行打印预览。在打印预览的时候我们更改打印方式，选择将页面保存为PDF即可实现页面保存为PDF的功能。比如：

这就是直接按ctrl+p，调出浏览器的打印预览界面，然后调节设置，就可以将页面打印出来。在代码中，使用window.print()方法来实现打印功能。

window.print()

<div>
	<p>这是需要打印的内容</p>
</div>
<button id='print'>打印</button>

<script type="text/javascript">
	$(function(){
		$("#print").on('click',function(){
			window.print()
		})
	})
</script>

但是使用window.print()来打印页面，是打印整个页面，像上面打印区域，就将按钮显示在上面了，这并不是我们想要的。

当然我们可以在点击按钮的时候将按钮隐藏起来。如下:

<script type="text/javascript">
	$(function(){
		$("#print").on('click',function(){
			$(this).css('display','none')
			window.print()
		})
	})
</script>

但是，如果我们只想打印某一个区域呢？需要将到处的图片/PDF是竖着的呢？是A4纸呢？这可以通过css的媒体查询来实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
</head>
<body>
<div>
	<p>这是需要打印的内容</p>
	<p class="pdf-title">打印显示的内容</p>
	<p class="panel-sm">打印改变元素样式</p>
</div>
<button id='print' class="other-ele">打印</button>

<script type="text/javascript">
	$(function(){
		$("#print").on('click',function(){
			window.print()
		})
	})
</script>
</body>
<style type="text/css">
	.pdf-title{
		display: none;
	}
	.panel-sm{
		margin-top: 20px;
	}
	.other-ele{
		display: block;
	}
	@media print {
    @page {
        size: A4 portrait; // A4大小 纵向
    }
    
    .other-ele {
        // 打印时将不需要的元素隐藏
        display: none;
    }
    
    .pdf-title {
        // 只在打印时候显示的元素
        display: block;
    }
    
    .panel-sm {
        // 打印时候改变某些元素的样式
        margin: 0;
        border: 1px solid #bce8f1;
    }
}
</style>
</html>

我们发现有些样式改变了，但有些样式依然没有改变，所以针对css打印的更多设置参考：css打印

如果想利用css来实现元素的样式变化，显示隐藏，最好是在元素上面新加一个class，而不是在原有的class类上写。

比如有这样的一个

<p class="show">显示隐藏</p>

我们在执行打印时，就不在原有的这个show上改变元素的样式了，我们新增一个class属性，

<p class="show show-print">显示隐藏</p>

然后在css媒体查询上实现

@media print{
	   .show-print{
		   display: block;
	   }
	}

经测试，有效。

上面这些方式都是利用浏览器的打印功能来实现的，有没有那种直接点击就打印或下载的写法呢？有，通过jsPdf实现。

关于jsPdf打印，可以参考这篇文章--前端实现html转pdf方法总结

前端实现打印功能（转）

猜你喜欢