前端使用base64编码进行pdf预览以及触发浏览器打印功能(解决操作iframe打印发生的跨域问题)
公司有个需求是,在页面显示pdf文件,并有一个button点击打印pdf就会触发print打印弹出打印预览框小编使用的技术栈是vue(其他技术也是这种思想)1、安装print-jsnpm install print-js --save2、使用iframe标签显示pdfbasedata:base64编码<!--basedata为base64编码--><iframe ...
·
公司有个需求是,在页面显示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 });
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)