有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue打印插件(页面打印功能vue-print-nb)实现方式

vue 炮渣日记 2周前 (11-22) 47次浏览 已收录 0个评论 扫描二维码

项目安装

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 = false

Vue.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>

运行效果

vue打印插件(页面打印功能vue-print-nb)实现方式

vue打印插件(页面打印功能vue-print-nb)实现方式
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址