预览效果图:
打印指定文件效果图:
点击按钮
直接弹出该打印页面:
依赖:
实现预览+打印功能:npm install --save vue-pdf
代码:
打印部分:<a-button @click.stop="printClick">打印</a-button><pdfv-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)},},预览部分:<pdfstyle="max-height:95.6%;overflow-y: scroll;"ref="pdf":src="imgSrc"/>//对应代码块引入组件import pdf from 'vue-pdf'components: {pdf },data(){return{imgSrc:"pdf路径"}},