[JavaScript知识库]vue--纯前端预览pdf、word文件

项目中需要对已上传得附件根据后台传回得url地址进行文件内容得预览读取并渲染。文件类型为pdf或word2种类型
1、word类型–.doc/.docx
安装插件：

npm i docx-preview@0.1.4 
npm i jszip 

2、pdf类型

npm install --save vue-pdf 

3、页面中使用：

<template>
  <div class="essential">
    <div class="cont-ess">
      <div class="educate">
        <div class="title-ess" style="">
          <span style="margin-right:10px;">|</span>
          <span style="flex: 1;">目标责任书</span>
          <div>
            <el-button type="primary" plain size="small" @click="getFiles">重新上传</el-button>
          </div> 
        </div>
        <div class="opsing scroll-bar" v-loading="loading">
          <!-- word类型 -->
          <div ref="file" v-if="type==='.docx'||type==='.doc'&&show"></div>
          <!-- pdf文件 -->
          <div v-if="pdfUrl&&type==='.pdf'&&show">
            <el-button-group v-if="pdfUrl&&type==='.pdf'&&show">
              <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
              <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              <span style="marginTop: 10px;line-height:30px; color: #409EFF;margin-left:20px">
                {{ pageNum }} / {{ pageTotalNum }}
              </span>
            </el-button-group>
              <pdf ref="pdf" :page="pageNum" :src="pdfUrl"
                @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event" >
              </pdf>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

// word文件
import axios from 'axios'
const docx = require('docx-preview');
window.JSZip = require('jszip')
// pdf文件
import pdf from 'vue-pdf'

export default {
 components: { pdf },
 props:['uid','files'],
  data () {
    return {
      urls:process.env.VUE_APP_BASE_API,
      type:'',
      pdfUrl:'',
      pageNum: 1,
      // 总页数
      pageTotalNum: 1, 
      // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
      loadedRatio: 0, 
      show:false,
      loading:false,
   };
  },
  watch:{
    uid(e){},
    files(e){
      this.choseFile()
    }
  },
  mounted(){
    this.choseFile()
  },
  created(){
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    if(this.pdfUrl){
      this.pdfUrl = pdf.createLoadingTask(this.pdfUrl)
    }
  },
  methods: {
    // 上一页
    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
    },
    //  重新上传
    getFiles(){
      this.$emit('filList')
    },
    // 附件读取
    choseFile(){
      if(this.files){
        this.loading=true
        let name=this.files[0].name.substring(this.files[0].name.lastIndexOf("."))
        this.type=name
        if(name===".docx"||name===".doc"){
          axios({
            method: 'get',
            responseType: 'blob', // 设置响应文件格式
            url:this.urls+this.files[0].url,
          }).then(({data}) => {
            docx.renderAsync(data,this.$refs.file) // 渲染到页面预览
            console.log(docx.renderAsync(data,this.$refs.file))
            console.log(data)
          })
        }else if(name===".pdf"){
          this.pdfUrl=this.urls+this.files[0].url
        }
        this.show=true
         this.loading=false
      }
    },
  }
}
</script>

<style lang='scss' scoped>
::v-deep .docx-wrapper{
  background: none !important;
}
::v-deep .docx{
  line-height:30px !important;
  font-size: 18px !important;
}
::v-deep .annotationLayer{
  font-size: 18px !important;
}
.cont-ess{
  width: 100%;
  height: auto;
  padding-top:45px;
  .educate{
    .title-ess{
     color: rgba(64, 158, 255, 1);
	   font-size: 20px;
	   text-align: left;
     height: 35px;
	   font-weight: bold;
     display: flex;
     border-bottom: 1px solid rgba(229, 229, 229, 1);
    }
    .opsing{
      height: 900px;
      overflow: auto;
      padding: 30px 0px 30px 0px;
    }
  }
}
/** 滚动条样式修改*/
.scroll-bar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  height: 4px;
}

.scroll-bar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background-color: #196fc5;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.scroll-bar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background-color: #dbe6f3;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/** 滚动条样式修改*/
</style>

这里是我遇到自己查阅得方法记录。
pdf文件因为布置一页，所以也可以分页或者全部一页展示，这里只有分页展示。方法有很多，慢慢研究、、、、、


目前实现可以了，但是还有未知得问题，研究中、、、、