mammoth.js/sheetjs/vue-pdf内网文件的预览问题

前端小功能：Word,PDF,Excel文档vue预览

最新需求需要内网环境进行预览，pdf可以直接使用浏览器自带的方式进行预览，但是word和excel需要借助插件，预览本地文件，或者是内网文件，可以使用以下方法进行预览：

PDF：Vue-pdf

Word: mammoth.js

Excel: SheetJS

一、word预览–mammoth.js

安装：npm install --save mammoth

github地址

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>

<style>
</style>

跳转带的参数：

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

github地址

excel.vue：

<template>
  <div id="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="(value,key,index) in tableData[2]"
        :key="index"
        :prop="key"
        :label="key"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [],
      workbook: {},
      excelURL: "",
    };
  },
  mounted() {
    this.excelURL = this.$route.query.excelURL;
    this.readWorkbookFromRemoteFile(this.excelURL);
  },
  methods: {
    readWorkbookFromRemoteFile: function (url) {
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      let _this = this;
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          var data = new Uint8Array(xhr.response);
          var workbook = XLSX.read(data, { type: "array" });
          console.log(workbook);

          var sheetNames = workbook.SheetNames; // 工作表名称集合
          _this.workbook = workbook;
          _this.getTable(sheetNames[0]);
        }
      };
      xhr.send();
    },
    getTable(sheetName) {
      console.log(sheetName);
      var worksheet = this.workbook.Sheets[sheetName];
      this.tableData = XLSX.utils.sheet_to_json(worksheet);
      console.log(this.tableData);
    },
  },
};
</script>

<style lang="stylus" scoped>
#table {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  border: 1px solid #ebebeb;
  padding: 20px;
  width: 80%;
  margin: 20px auto;
  border-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
  border-radius: 10px;
  overflow: scroll;
  height: 100%;

  .tab {
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: row;
  }
}
</style>

<style scoped>
.is-active {
  background-color: #409eff;
}
span {
  background-color: red;
}
</style>

三、pdf预览——vue-pdf

安装：npm install --save vue-pdf

<template>
    <div>
          <pdf ref="pdf" :src="pdfUrl" style="width: 100%;" />
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
    data(){
        return: {
            pdfUrl: '',
        }
    }
    created() {
       const path = 'test.pdf'// 你获取到的pdf路径
       // pdf.createLoadingTask解决文件件跨域问题
       this.pdfUrl = pdf.createLoadingTask(path)
  },
}
</script>