不同类型的文件预览

word文件预览

npm install mammoth

import mammoth from 'mammoth'

```<template>
  <div class="box">
    <div class="table" v-html="vHtml"></div>
  </div>
</template>

<script>
import mammoth from 'mammoth'
export default {
  data() {
    return {
      vHtml: '',
      wordURL: this.$route.query.fileurl,
    }
  },
  mounted() {
    this.privewFile(this.wordURL)
  },
  methods: {
    // 在线查看word文件
    privewFile(url) {
      var vm = this
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      xhr.onload = function() {
        if (xhr.status == 200) {
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function(resultObject) {
            vm.$nextTick(() => {
              vm.vHtml = resultObject.value
            })
          })
        }
      }
      xhr.send()
    },
  },
}
</script>
<style scoped lang="scss">
/deep/.table {
  max-width: 2000px;
  min-width: 100%;
  table {
    border-collapse: collapse !important;
  }
  td {
    border: 1px solid #000;
    margin: 0;
    padding: 16px;
    color: #000;
    min-width: 120px;
    p {
      text-align: center;
    }
  }
  #sjs-A1 {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>