vue打印插件

网页实现打印 可以选择性的打印某一部分 的vue组件

• 说明文档
• 链接 github.com/xyl66/vuePl…

1、引入 把print.js 下载到本地,然后放在src 下面添加文件夹里.

2、 在main.js 里面引入并注册

import Print from '@/plugs/print'
Vue.use(Print) // 注册

3 使用

<section ref="print">
 打印内容
 <div class="no-print">不要打印我</div>
</section>

this.$print(this.$refs.print) // 使用

注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空 
指定不打印区域 
方法一. 添加no-print样式类

<div class="no-print">不要打印我</div> 

方法二. 自定义类名

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用

4、注意事项:

• (1) 有一页内容却打印两页有一个空白页--问题
  解决:margin 影响了.查找影响的margin样式改成padding

• (2) 样式书写不能使用less 和sass 可以使用原始class

• (3) echarts 打印不出来 --问题
  隐藏echarts 把echarts 转换成图片.然后页面展示图片.图片可以进行打印进行.

<div id="myRadarChart" :style="{width: '440px', height: '240px'}" class="myChart" v-show="false"></div>
< img :src="canvasImg" width="440" height="240">

drawLine() {
 this.myRadarChart = this.$echarts.init(document.getElementById('myRadarChart'))
 this.myRadarChart.setOption({...})
 this.canvasImg = this.myRadarChart.getConnectedDataURL({
  pixelRatio: 2
 })
},

• (4) 背景颜色不生效 -- 问题
  需要在添加背景颜色的样式里面添加 -webkit-print-color-adjust: exact;
  例如:

.top{
  background: #F1F3F9;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
        color: #5A6173;
        -webkit-print-color-adjust: exact;
 }