vue 日常使用

一. vue 使用 pdf 插件

1. 使用Vue Cli生成项目
2. 下载pdf.js
3. 解压下载后的文件，将文件夹里面的build目录和web目录复制到Vue项目下的public目录（如果是使用Vue Cli 2版本生成项目，复制到static目录）
4. 在vue文件里，根据vue cli文档获取到public目录的地址：

data () {
 return {
   baseUrl: process.env.BASE_URL
 }
}

5. 在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 函数自动更新，这时需要手动更新：

1. 调用forceUpdate自动触发render，再写修改属性的操作

this.$forceUpdate()

2. 用set方法

// 比如设置年龄
this.$set(data,'age', '20');