vue-pdf PDF文件預覽

一，下載vue-pdf

npm i vue-pdf -save

引入pdf

    <el-dialog title="PDF 預覽" :visible.sync="viewVisible" width="70%" center>
      <template>
        <pdf :src="pdfUrl"></pdf>
      </template>
    </el-dialog>
import pdf from 'vue-pdf'
export default {
    components: {pdf},
    data() {
      return {
        pdfUrl:'',
            viewVisible:true
      }
    },
    created(){
           let path = 'http://image.cache.timepack.cn/nodejs.pdf'//你獲取到的pdf路徑
       this.pdfUrl = pdf.createLoadingTask(path)//pdf.createLoadingTask解決文件件跨域問題
    }

二，后台返回文件流實現pdf預覽（也是本項目中用到的）
1，使用<iframe></iframe>標簽

<iframe class="prism-player" :src="pdfUrl" width="100%" height="800px"></iframe>
data(){
　　return {
　　　　pdfUrl:''
　　}
}

2, getShowfile是項目中的請求方法可根據自己項目情況寫

          getShowfile({path:path}).then(res=>{
            let urlPdf  = window.URL.createObjectURL(new Blob([res.data]))
            this.pdfUrl = '/pdf/web/viewer.html?file=' + encodeURIComponent(urlPdf)
          })

3，要在項目中public文件夾下添加這個pdf文件包，pdf文件夾包可在https://github.com/goSunadeod/vue-pdf.js-demo下載 （文件路徑static/pdf）

三，使用window.open(url)

參考：https://github.com/goSunadeod/vue-pdf.js-demo

官方demo：http://mozilla.github.io/pdf.js/web/viewer.html