vue项目中操作PDF文件

最新推荐文章于 2024-08-12 10:03:07 发布

weixin_30485799

最新推荐文章于 2024-08-12 10:03:07 发布

阅读量461

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/jrg-Archer/p/7723698.html

版权

　　以前从来没接触过前端要求显示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

　　好了，搞定，溜了遛了......

转载于:https://www.cnblogs.com/jrg-Archer/p/7723698.html