vue 方法
第一種方法：通過npm 安裝插件
1.安裝 npm install vue-print-nb --save
2.引入 安裝好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print); //注冊
3.現(xiàn)在就可以使用了
<div id="printTest" >
<p>鋤禾日當午</
<p>汗滴禾下土 </
<p>誰知盤中餐</p>
<p>粒粒皆辛苦</p>
</div>
<button v-print="'#printTest'">打印</button>
如果內(nèi)容打印不全，在打印操作時點擊更多設置，然后設置縮放
驗證：vue-print-nb 使用某些瀏覽器點擊沒效果（不知道什么原因）
第二種方法：手動下載插件到本地
插件地址：https://github.com/xyl66/vuePlugs_printjs
import Print from '@/plugs/print'
Vue.use(Print) // 注冊
<template>
<section ref="print">
打印內(nèi)容
<div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用
注意事項 需使用ref獲取dom節(jié)點情组，若直接通過id或class獲取則webpack打包部署后打印內(nèi)容為空
指定不打印區(qū)域
方法1. 添加no-print樣式類
<div class="no-print">不要打印我</div>
方法2. 自定義類名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
未試驗： print.js 空厌、vue-easy-print
jquery 方法
jquery-print.js
1、index.html 引入
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jQuery.print/1.5.0/jQuery.print.min.js"></script>
2挤茄、webpack.base.conf.js
externals: {
"vue": "Vue",
"element-ui": "ELEMENT",
'jquery':'window.jQuery'
}
注：需要全局化jQuery。
3、使用
$("#printObject").print();
jquery.jqprint.js
使用方法同上晴圾。
javascript 方法
頁面打印
function printPage(){// 此處函數(shù)名不能為print，因為會與window.print()形成無限遞歸
window.print();
}
區(qū)域打印
準備工作：用：<!- -startprint- ->和<!- -endprint- ->“圈”住要打印的代碼段
function printArea(){
var bdHtml=window.document.body.innerHTML;
var sprnstr="<!--startprint-->";
var eprnstr="<!--endprint-->";
var prnHtml=bdHtml.substring(bdHtml.indexOf(sprnstr)+17);/*去掉前面的部分*/
prnHtml=prnHtml.substring(0, prnHtml.indexOf(eprnstr));/*去掉后面的部分*/
var myWindow=window.open('', '', '');/*打開新的瀏覽器窗口（選項卡）*/
myWindow.document.body.innerHTML=prnHtml;
myWindow.print();
}
注意：CSS的@media print{} 控制打印時的樣式噪奄、或者寫在元素上
分頁：<div style="page-break-before:always;"><br /></div>
