vue-在线预览pdf文件和下载(pdf.js)

最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览)
最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果),强烈推荐该插件,以下介绍用法

一、下载插件

二、将下载构建后的插件放到文件中public(vue/cli 3.0)

在这里插入图片描述

三、在vue文件中直接使用,贴上完整代码

<template>
  <div class="wrap">
    <iframe :src="pSrc" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
  export default {
    name: "pdf",
    data() {
      return {
        pSrc:'',
      };
    },
    methods: {
      loadPDF () {
        //baseurl :pdf存放的文件路径,可以是本地的,也可以是远程,这个是远程的,亲测可以用
        let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
        //ie有缓存加个随机数解决  + '?r=' + new Date()
        let pSrc = baseurl + '?r=' + new Date();
        this.pSrc = '../../plugin/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
      },
    },

    mounted: function() {
      this.loadPDF();
    }

  };
</script>

<style scoped>
.wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
}
</style>

以下为我的项目的成功后的截图

在这里插入图片描述

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值