近来项目中需求为在浏览器上阅览PDF花样的文件，之前没有写过，随即上网查阅，发明大家常运用的为两个插件。
其一是火狐出品的pdf.js,github地点：https://github.com/mozilla/pd…;
其二是PDFObject，额，不太清晰作者，github地点：https://github.com/pipwerks/P…。
前者功能强大，社区活泼，后者是基于jquery封装出来的插件，如果在vue中混着jquery总觉得怪怪的，所以我挑选了前者。
又看了一下有无轮子可用，诶嘿，vue-pdf,github地点：https://github.com/FranckFrei…。看了文档，可取。
起首下载插件（发起先新建一个demo出来跑，直接撸到开辟项目中…出什么么蛾子…）

// 我运用的是yarn npm的话 npm install vue-pdf --dev
yarn add vue-pdf --dev

然后在vue文件中引入运用，发起新建一个vue文件二次封装

<template>
  <div class="pdf-container">
    <pdf :src="pdfUrl"/>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'VuePdf',
  components: { pdf },
  data() {
    return {
      // 此处为示例pdf地点
      pdfUrl: 'http://image.cache.timepack.cn/nodejs.pdf'
    }
  }
}
</script>

以后就能够兴奋的游玩了。

不过我迁移到公司项目的时刻碰到一个坑，引入这个插件的时刻就会报错window is not defined，厥后查询材料发明这篇文章，题目才得已处理，谢谢作者。https://blog.csdn.net/u010745…

只需要在webpack中设置以下

module.exports = {
  // 请无视这无关的代码
  output: {
    globalObject: "this"
  }
  // 请无视这无关的代码
}

以上。