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

明知山

发布于 2020-09-03 11:27:25

5.1K0

发布于 2020-09-03 11:27:25

在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文件，将一起部署到服务器