vue+elementui+print.js_vue elementui print.js

vue+elementui+print.js

1. 首先去资源中下载print.js

   

2. 在项目下的static中建立一个文件夹print-plugs

3. 在mian.js中导入

   import Print from '../static/plugins/print-plugs/print' // 打印
   Vue.use(Print)
   1
   2

4. 使用print.js

   <template>
   	<div>
   		<div ref="printCont">
           	<div>
             		<span>jwq</span>
             		<span class="no-print">zhn</span>
              		<!-- 在这里面加入class="no-print",顾名思义就是不打印这部分内容-->
       		</div>
       	</div> 
           <el-button type="primary"  @click="print()">打印</el-button>
   <!-- 打印按钮，自己定义即可-->
       </div>
   </template>
   <script>
       methods: {
            //打印
         print() {
           this.$print(this.$refs.printCont)
         },
       }
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

5. 注意事项

   在这个打印的内容里面不可以是用相对定位position: relative;会把里面的位置移动，不在打印预览的界面内，所以请使用内外边距，绝对定位，居中等方式调整位置