vue word预览，excel预览，pdf预览

一、word预览–mammoth.js
安装：​​npm install --save mammoth​​

tip：只能预览.docx文件

word.vue:

<template>
  <div>
    <div id="wordView" v-html="vHtml" />
  </div>
</template>

<script>
import mammoth from "mammoth";
export default {
  name: "word",
  data() {
    return {
      vHtml: "",
      wordURL:''//文件地址
    };
  },
  created() {
    let vm=this;
    vm.wordURL = this.$route.query.wordURL;

    const xhr = new XMLHttpRequest();
    xhr.open("get", this.wordURL, true);
    xhr.responseType = "arraybuffer";
    xhr.onload = function () {
      if (xhr.status == 200) {
        mammoth
          .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
          .then(function (resultObject) {
            vm.$nextTick(() => {
              // document.querySelector("#wordView").innerHTML =
              //   resultObject.value;
              vm.vHtml=resultObject.value;
            });
          });
      }
    };
    xhr.send();
  },
  methods: {
  },
};
</script>

 跳转带的参数：

if (row.fileType == 3) {
         //word
         let routeData = this.$router.resolve({
           path: "/word",
           query: {
             wordURL: response.data,
           },
         });
         window.open(routeData.href, "_blank"); 
       } else if (row.fileType == 5) {
         //pdf
         window.open(response.data);
       } else if (row.fileType == 4) {
         //excel
         let routeData = this.$router.resolve({
           path: "/excel",
           query: {
             excelURL: response.data,
           },
         });
         window.open(routeData.href, "_blank");
       }

二、excel预览–sheetjs
安装：​npm install --save xlsx​

1.
三、pdf预览——vue-pdf
安装：​​npm install --save vue-pdf​​