一. vue 使用 pdf 插件
- 使用Vue Cli生成项目
- 下载
pdf.js - 解压下载后的文件，将文件夹里面的
build目录和web目录复制到Vue项目下的public目录（如果是使用Vue Cli 2版本生成项目，复制到static目录） - 在vue文件里，根据vue cli文档获取到
public目录的地址：
data () {
return {
baseUrl: process.env.BASE_URL
}
}
- 在Vue文件的template里使用
<iframe width="100%" height="500" scrolling="no"
:src="`${baseUrl}web/viewer.html?file=${baseUrl}web/compressed.tracemonkey-pldi-09.pdf`"></iframe>
注意:
实际项目中的pdf地址可能是一个带参数的ajax请求，如：/api/pdf?id=1需要对地址转码encodeURIComponent('/api/pdf?id=1')
二. html 原生预览 pdf
<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="100%" height="100%">
<param name="SRC" :value="url" >
<embed width="100%" height="100%" fullscreen="yes" :src="url">
<noembed>
</noembed>
</embed>
</object>
如果需要动态赋值 src，会出现加载不出 pdf 的现象，因为 embed 元素的 src 不允许更改，可以在获取 src 之后再加载 embed 元素。
三.赋值后页面无更新
有时候因为数据嵌套太多，无法触发 render 函数自动更新，这时需要手动更新：
- 调用forceUpdate自动触发render，再写修改属性的操作
this.$forceUpdate()
- 用set方法
// 比如设置年龄
this.$set(data,'age', '20');
