此工具可以在web上看.odt與.pdf檔,這次是套用在Webpack來呈現,先按照[Vue.js教學筆記]Webpack模組整合工具之安裝進行安裝,建立專案名稱為viewerjs-project,安裝設定如下,
由於有安裝ESLinit,所以在package.json中的scripts需要指令,來幫助程式快速整理,
"lintfix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
為了方便測試,準備.pdf在XAMPP下執行,
得到一行連結,
http://localhost/demodoc.pdf
ViewerJS官方網站如下,
點擊右下角進行下載,
下載得到壓縮檔,
解壓縮檔後取出ViewerJS放置\viewerjs-project\static中,
開啟專案中的HelloWorld.vue,把程式清空如下所示,
安裝完成來撰寫程式,程式如下,
<template>
<iframe :src="'static/ViewerJS/#' + url" width="100%" height="700" allowfullscreen webkitallowfullscreen></iframe>
</template>
<script>
export default {
data () {
return {
url: 'http://localhost/demodoc.pdf'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
執行程式需注意.pdf檔要與web要在同一個port才能成功執行,輸入指令
npm run build
把產生出的index.html與static文件夾放在XAMPP執行,
執行結果如下,
