浏览器在线预览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