专栏首页前端开发随笔浏览器在线预览offce,vue-pdf预览pdf文件

浏览器在线预览offce,vue-pdf预览pdf文件

在office官方自带的链接后添加自己的文档链接,浏览器就可以自动解析预览 支持 word 、ppt、excel,不支持pdf格式文件

 "https://view.officeapps.live.com/op/view.aspx?src=" + http://word;

我们引入vue-pdf来在线预览pdf文件 文档地址

npm install --save vue-pdf
<template>
  <div class="box">
    <pdf
      :src="pdf"
      :page="currentPage"
      @num-pages="totalPage=$event"
      @page-loaded="currentPage=$event"
    ></pdf>
    <div class="turn">
      <span :class="currentPage == 1 ? 'disabled' :'' " @click="changePage(0)">上一页</span>
      <span :class="currentPage == totalPage ? 'disabled' :'' " @click="changePage(1)">下一页</span>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdf: "", //浏览的pdf文件
      currentPage: 1,//当前页
      totalPage: 0//总页数
    };
  },
  mounted() {
  },
  methods: {
  //因为插件每次只展示一页,所以要手动控制页数
    changePage(val) {
      if (val == 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val == 1 && this.currentPage < this.totalPage) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}
.turn {
  margin-top: 40px;
  text-align: center;
}
.turn span {
  margin: 0 20px;
  background: darkcyan;
  color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  border-radius: 50px;
}
.disabled {
  background: #ddd !important;
}
</style>

打包上线的时候会生成个worker文件,将一起部署到服务器

还会生成个.map文件去src/config/index.js修改

productionSourceMap:false

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序使用Painter组件生成海报

    wePanda
  • Swiper做轮播图

    wePanda
  • 引用lib-flexible导致第三方Ui库缩小

    postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude

    wePanda
  • jdbc操作根据bean类自动组装sql,天啦,我感觉我实现了hibernate

    场景:需要将从ODPS数仓中计算得到的大额可疑交易信息导入到业务系统的mysql中供业务系统审核。但是本系统是开放是为了产品化,要保证不同环境的可移植性,同时同...

    intsmaze-刘洋
  • 读书笔记: 博弈论导论 - 04 - 完整信息的静态博弈 理性和公共知识

    绿巨人
  • UX设计师作品集里应该有啥?

    也许你已经掌握了所有的UX(用户体验)设计的技巧和技能,但是如何将它们展示出来才至关重要。资深的UX设计师知道,必须把自己的完美方法论和解决问题的能力凸显出来。

    Shawn.W
  • 这里有一份BAT大厂Android面试超详细知识点,赶快收藏备战金九银十!

    金九银十面试季,相信大家肯定急需一套Android面试宝典,今天小编就给大家准备了我珍藏已久的Android高阶面试宝典,一份超级详细的Android面试必备知...

    Android技术干货分享
  • 聊聊 Go 语言中的面向对象

    在 Go 语言中可以使用结构体[2](Structs)对属性进行封装,结构体就像是类的一种简化形式。

    江不知
  • 数据分析&数据挖掘入门知识分享(4)

    编者按:本文为 数据分析&数据挖掘入门知识分享(3)的连载,还有一部分待上传,欢迎小伙伴们关注学习,若对您有帮助请分享至朋友圈,让更多人学习! 以下图片点击横屏...

    小莹莹
  • 【推荐系统篇】--推荐系统之测试数据

    LhWorld哥陪你聊算法

扫码关注云+社区

领取腾讯云代金券