vue打印

1. 新建Print.vue文件，复制粘贴代码如下：

<script>
const print = function(id, cb) {

let style = "";

let domStyle = document.styleSheets;

if (domStyle && domStyle.length > 0) {

for (let i = 0; i < domStyle.length; i++) {

try {

if (domStyle[i].cssRules || domStyle[i].rules) {

let rules = domStyle[i].cssRules || domStyle[i].rules;

for (let b = 0; b < rules.length; b++) {

style += rules[b].cssText;

}
}
} catch (e) {

console.log(domStyle[i].href + e);

}
}
style += ".show-on-print { display: block; }";

}
let styleHtml = '";

var printHTML = styleHtml + document.getElementById(id).innerHTML; // 获取要打印的内容

var page = window.open("", "_blank"); // 打开一个新窗口，用于打印

page.document.write(printHTML); // 写入打印页面的内容

page.print(); // 打印

var userAgent = navigator.userAgent;

if (

(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) ||

userAgent.indexOf("Edge") > -1 ||

(userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1)

) {
// IE浏览器
page.document.execCommand("print");
} else {

console.log("not IE");
}
page.close(); // 关闭打印窗口

cb();
};
export default {

print
};
</script>

2. 在要使用的地方，比如demo.vue中，引入Print文件，如下：

import printer from "./components/Print”; // 注意修改相对路径

3. 在demo.vue中添加局部样式

.show-on-print {
    display: none;
}

4. demo.vue中要打印内容的html

<button @click="printPage()">Print local rangebutton>


<div id="printPage">


<h1 class="show-on-print">隐藏的打印标题h1>

<table>
<thead>
<th>nameth>
<th>titleth>
<th>levelth>
thead>
<tbody>
<tr>
<td>小明td>
<td>前端工程师td>
<td>资深专家td>
tr>
tbody>
table>
div>

5. 在methods对象中添加打印函数printPage

methods: {
    printPage() {
        // 第一个参数printPage对应html中的id，第二个参数是打印完成后的回调函数
        printer.print("printPage", function() {
            console.log("打印结束");
        });
    }
}

效果如图：
注：如果要添加额外的css样式，可以修改print函数里的style