Michael_Jheng的部落格

此工具可以在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放置\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執行,

執行結果如下,