一. vue 使用 pdf 插件
- 使用Vue Cli生成項(xiàng)目
- 下載
pdf.js - 解壓下載后的文件，將文件夾里面的
build目錄和web目錄復(fù)制到Vue項(xiàng)目下的public目錄（如果是使用Vue Cli 2版本生成項(xiàng)目堵腹，復(fù)制到static目錄） - 在vue文件里占婉，根據(jù)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>
注意:
實(shí)際項(xiàng)目中的pdf地址可能是一個(gè)帶參數(shù)的ajax請(qǐng)求繁涂，如：/api/pdf?id=1需要對(duì)地址轉(zhuǎn)碼encodeURIComponent('/api/pdf?id=1')
二. html 原生預(yù)覽 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>
如果需要?jiǎng)討B(tài)賦值 src，會(huì)出現(xiàn)加載不出 pdf 的現(xiàn)象，因?yàn)?embed 元素的 src 不允許更改，可以在獲取 src 之后再加載 embed 元素鉴分。
三.賦值后頁(yè)面無更新
有時(shí)候因?yàn)閿?shù)據(jù)嵌套太多，無法觸發(fā) render 函數(shù)自動(dòng)更新带膀，這時(shí)需要手動(dòng)更新：
- 調(diào)用forceUpdate自動(dòng)觸發(fā)render志珍，再寫修改屬性的操作
this.$forceUpdate()
- 用set方法
// 比如設(shè)置年齡
this.$set(data,'age', '20');
