PDFObject是一款非常优秀的PDF在线预览js插件,在之前我爱模板网已经介绍过:pdfobject.js——一款在线预览PDF的js库。今天讲解它在vue中的使用方法:
1、肯定是先安装了:
npm i pdfobject --save
2、引入
import pdf from 'pdfobject'
3、指定元素与样式
#pdf-content{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 20%;
background: #999;
}
4、一定要在mounted中调用,因为它必须等待dom元素渲染出来才能找到节点。
mounted(){
pdf.embed("../../static/pdf.pdf", "#pdf-content");
}
小技巧:建议将上面的代码封装到一个组建当中,然后用dialog等方法打开,这样的话,按esc可以直接关闭,否则全屏的话会导致关闭不了。esc其实关闭的是dialog。下面是我爱模板网在工作中封装的一个组件:ViewPDF,这个组件还带提示:ESC可关闭PDF
按“ESC”键可关闭PDF
import pdf from 'pdfobject'
export default {