最近项目中需求为在浏览器上阅览 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”
}
// 请忽视这无关的代码
}
以上。