技术文摘您现在的位置:主页 > 技术文摘 >

vue项目中操作PDF文件

发布日期:2017-10-24 15:19

以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊...

  无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试,并没有什么卵用,网页中可以显示pdf,但是页面上就是出不来,反正我是没有试成功;还有PDFObject    PDF.js  这两个吧,PDFObject操作起来简单一些,PDF.js就稍微麻烦一些,不过基于jquery的不是我想要的效果,有兴趣的同学可以研究一下,貌似这个PDF.js很强大

  接下来这个才是我们今天的主角,基于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.在本地跑起你的项目就完了 

本文由西安Java培训(www.shun580.com)整理编辑