VUE中实现打印功能插件—vue-easy-print

话不多说直接上代码

• 1.安装插件：注意版本号

npm install vue-easy-print --save

我用的是0.0.8版本

npm install vue-easy-print@0.0.8 --save

• 2.vue文件引入插件

import vueEasyPrint from "vue-easy-print";

• 3.注册组件

export default {
    
    
	components: {
    
    
		vueEasyPrint 
	}
}

• 4.页面使用加点击打印

<template>
	<div>
          <div>
            <el-button type="success" @click="dayin">打印</el-button>
          </div>
          <vue-easy-print ref="printRef">
              <div v-html="dates"></div> //因为我这里后端返回的身世html数据流所以使用v-html解析了，
              //这里可以正常写代码打印区域
          </vue-easy-print>
  </div>
</template>
<script>
import vueEasyPrint from "vue-easy-print";
export default {
    
    
  components: {
    
    
    vueEasyPrint
  },
  data() {
    
    
    return {
    
    
    };
  },
  methods: {
    
    
    //打印功能
    dayin(){
    
    
      this.$refs.printRef.print()
    },
  },
};
</script>