vue项目中操作PDF文件
Posted 进击的Archer
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中操作PDF文件相关的知识,希望对你有一定的参考价值。
以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊...
无奈之下,去找度娘,方法还不少,iframe embed object这些标签就可以, 可是拿过来做个demo一试,并没有什么卵用,网页中可以显示pdf,但是页面上就是出不来,反正我是没有试成功;还有PDFObject PDF.js 这两个吧,PDFObject操作起来简单一些,PDF.js就稍微麻烦一些,不过基于jquery的不是我想要的效果,有兴趣的同学可以研究一下,貌似这个PDF.js很强大,附上链接:http://blog.csdn.net/liuyaqi1993/article/details/77822946
接下来这个才是我们今天的主角,基于vue的vue-pdf,强大且简单
1.安装
npm install --save vue-pdf
2.新建一个组建Cpdf.vue
<template>
<pdf src="../../static/main/PDF/jq2017_10_01.pdf"></pdf>
</template>
<script>
import pdf from ‘vue-pdf‘
export default {
components: {
pdf
}
}
</script>
3.在本地跑起你的项目就完了 npm run dev
4.最后附上github地址 https://github.com/FranckFreiburger/vue-pdf
好了,搞定,溜了遛了......
以上是关于vue项目中操作PDF文件的主要内容,如果未能解决你的问题,请参考以下文章
vue中浏览PDF文件,为啥显示的是项目的首页而不是pdf?