vue-pdf 跳坑

vue 项目展示 pdf 文件

当时是直接把文件放到了页面的文件夹下面,引用的时候地址直接是./01.pdf

此时没有报错,检查选中是有占位的,但是没有显示文档出来

我查了很久,一直也查不到解决方法

后来试了试线上的pdf文件,发现可以展示

然后看到官网和查到的资料,都是放到 public 或者 static 下面

我就把文件放在了 static 下面试试,发现可以

总结下来就是要么是线上的文件,要么文件就放到 public 或者 static 下面

下面是代码

			  <div>
                <el-button-group>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    size="mini"
                    @click="prePage"
                  >上一页</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                  >{{ pageNum }} / {{ pageTotalNum }}</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="nextPage"
                  >下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>

                <pdf
                  :page="pageNum"
                  :src="url"
                  @progress="loadedRatio = $event"
                  @num-pages="pageTotalNum=$event"
                ></pdf>
              </div>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      // 页面
      pageNum: 1,
      // 总页面 
      pageTotalNum: 1,
      loadedRatio: 0,
      url:"http://image.cache.timepack.cn/nodejs.pdf", // pdf文件地址
    };
  },
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值