废话不多说，直接上代码
<template>
<div>
<!--//通过按钮来调用-->
<el-button type="primary" round v-print="printContent">打印 </el-button>
<!--//需要打印的页面-->
<div id="printDiv" class="print-box">
<div >打印内容</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
printContent: {
id: 'printDiv',
// preview: true, // 预览工具是否启用
// previewTitle: '储能服务费结算单', // 预览页面的标题
// popTitle: '储能服务费结算单', // 打印页面的页眉
extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
previewBeforeOpenCallback() {
console.log('正在加载预览窗口')
},
previewOpenCallback() {
console.log('已经加载完预览窗口')
},
beforeOpenCallback(vue) {
vue.printLoading = true
console.log('打开之前')
},
openCallback(vue) {
vue.printLoading = false
console.log('执行了打印')
},
closeCallback(a) {
console.log('关闭了打印工具', a)
},
clickMounted(vue) {
console.log('点击了打印按钮', vue)
// vue.printSet.popTitle = vue.tableHead // 动态设置页眉
}
}
}
}
}
</script>
<style lang="scss" scoped>
@page {
size: auto;
margin: 0mm;
}
.procedure {
word-wrap: break-word;
}
@media print {
//样式写在这里面
}
.title {
word-wrap: break-word; //内容不自动换行问题
}
</style>
你可能会发现报错执行不了，那是你没安装vue-print-nb依赖
复制下面命令，终端执行
npm install vue-print-nb --save
等待安装完成后，在main.js中粘贴下面代码
//全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
恭喜你，成功了