项目安装

npm i element-ui -S

npm install vue-print-nb --save

项目源码

main.js

import Vue from 'vue'import App from './App'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import Print from 'vue-print-nb'Vue.config.productionTip = falseVue.use(ElementUI);Vue.use(Print);new Vue({  el: '#app',  components: { App },  template: '<App/>'})

App.vue

<template>	<div id="app">		<h1>打印示例</h1>		<MyPrint />	</div></template><script>	import MyPrint from './components/MyPrint'	export default {		name: 'App',		components: {			MyPrint		}	}</script><style>	#app {		font-family: 'Avenir', Helvetica, Arial, sans-serif;		-webkit-font-smoothing: antialiased;		-moz-osx-font-smoothing: grayscale;		text-align: center;		color: #2c3e50;		margin-top: 60px;	}</style>

components/MyPrint.vue

<template>	<div>		<div id="printMe" style="background:#dfdef7;">			<p>临江仙·滚滚长江东逝水————杨慎</p>			<p>滚滚长江东逝水，浪花淘尽英雄。</p>			<p>是非成败转头空。</p>			<p>青山依旧在，几度夕阳红。</p>			<p>白发渔樵江渚上，惯看秋月春风。</p>			<p>一壶浊酒喜相逢。</p>			<p>古今多少事，都付笑谈中。</p>		</div>		<div class="describle">			<el-form ref="form" :model="form" label-width="80px">				<el-form-item label="名称" prop="name">					<el-input v-model="form.name"></el-input>				</el-form-item>				<el-form-item label="描述:" prop="describle">					<el-input :disabled="detail" type="textarea" :rows="4" :maxlength="2000" placeholder="" v-model="form.describle">					</el-input>				</el-form-item>				<el-button v-print="'#printMe'" type="primary">打印</el-button>			</el-form>		</div>		<div style="margin-top: 20px;">			<button v-print="'#printMe'">Print local range</button>		</div>			</div></template><script>	export default {		name: 'MyPrint',		data() {			return {				form: {					name:'',					describle:''				},				detail: false			}		},		methods:{					}	}</script>