公司有个需求是,在页面显示pdf文件,并有一个button点击打印pdf就会触发print打印弹出打印预览框

小编使用的技术栈是vue(其他技术也是这种思想)

1、安装print-js

npm install print-js --save

2、使用iframe标签显示pdf

basedata:base64编码

<!--basedata为base64编码-->
<iframe  :src="'data:application/pdf;base64,'+basedata" width="100%" height="100%">
</iframe>

3、button点击触发浏览器打印功能

<!--basedata为base64编码-->
<el-button type="primary" @click="onPrint" >打印</el-button>
import printJs from 'print-js';
export default {
	data(){
	    return {
	      basedata:"base64编码数据",//注意:base64是没有data:application/pdf;base64,这个的
	    }
	  },
	methods: {
		onPrint() {
			//直接弹出打印页面
			//不会跨域
			printJs({ printable: this.basedata, type: 'pdf', base64: true });
		}
	}
}
Logo

前往低代码交流专区

更多推荐