vue组件object_vue使用PDFObject的方法

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 {