vue-pdf 组件实现 pdf预览效果+点击打印按钮直接弹窗打印指定pdf文件

预览效果图：

打印指定文件效果图：
点击按钮

直接弹出该打印页面：

依赖：

实现预览+打印功能：
npm install --save vue-pdf

代码：

打印部分：

<a-button @click.stop="printClick">打印</a-button>
<pdf
        v-show="false"//这里为false主要是控制在页面上不显示，但是打印功能需要它
        ref="pdf"
        :src="printObj.url"
      />


//对应代码块引入组件
import pdf from 'vue-pdf'
components: { pdf },

data(){
	return{
	printObj: {
        url: "",
        preview: true, 
      },
    }
},

methods:{
	printClick(){
		//请求接口获取pdf路径
		 this.printObj.url = '';//获取到的pdf路径
              setTimeout(()=>{
                console.log('this.$refs.pdf::',this.$refs.pdf)
                this.$refs.pdf.print();//调用pdf打印功能
              },2000)
	},
},




预览部分：

<pdf
          style="max-height:95.6%;overflow-y: scroll;"
          ref="pdf"
          :src="imgSrc"
        />

//对应代码块引入组件
import pdf from 'vue-pdf'
components: { pdf },

data(){
	return{
		imgSrc:"pdf路径"
	}
},