vue实现打印功能的几种方法

方法一：使用vue-print-nb插件

安装 npm install vue-print-nb --save在main.js中引入 import Print from 'vue-print-nb' 注册 Vue.use(Print);使用 html <div id="printMe" style="background:red;"> <p>葫芦娃，葫芦娃</p> <p>一根藤上七朵花 </p> <p>小小树藤是我家 啦啦啦啦 </p> <p>叮当当咚咚当当　浇不大</p> <p> 叮当当咚咚当当 是我家</p> <p> 啦啦啦啦</p> <p>...</p> </div> <button v-print="'#printMe'">Print local range</button> js export default { data() { return { printObj: { id: "printMe", popTitle: 'good print', extraCss: 'https://www.google.com,https://www.google.com', extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' } }; } }

方法二：使用print.js插件

1.安装 npm install print-js --save 2.在main.js中引入 import printJS from 'print-js' 使用

方法三：调用浏览器打印方法 window.print()

兼容IE11

html <el-button @click="printpage" >打印</el-button> <div id="print">要打印内容</div> js printpage () { // 方法一 在当前窗口打印， 问题：重新刷新页面，体验不友好 let subOutputRankPrint = document.getElementById('print') // console.log(subOutputRankPrint.innerHTML) let newContent = subOutputRankPrint.innerHTML let oldContent = document.body.innerHTML document.body.innerHTML = newContent window.print() window.location.reload() document.body.innerHTML = oldContent return false // 方法二 在新窗口打印，问题：无表格线 // var newWindow = window.open("打印窗口", "_blank"); // var docStr = document.getElementById("print").innerHTML; // newWindow.document.write(docStr); // var styles = document.createElement("style"); // styles.setAttribute('type', 'text/css'); //media="print" // styles.innerHTML = "" // newWindow.document.getElementsByTagName('head')[0].appendChild(styles); // newWindow.print(); // newWindow.close(); },