vue 在线预览docx、xls、pdf

npm i docx-preview
npm i xlsx

html

      <!-- pdf -->
      <iframe v-if="previewType == 1" :src="previewUrl" frameborder="0" width="100%" height="100%"></iframe>
      <div v-if="previewType != 1" class="preview_content">
        <!-- excel -->
        <div v-if="previewType == 2" v-html="excelHtml" class="excel_preview_table"></div>
        <!-- word -->
        <div v-if="previewType == 3" ref="word"></div>
      </div>

script

import axios from 'axios';
const docx = require('docx-preview');
const XLSX = require('xlsx');
  data() {
    return {
      previewUrl: "", // 预览-文件路径
      previewType: "",
      excelHtml: "",
    };
  },
    // 预览
    operPreview(row) {
      let name = row.report;   // 文件名称
      this.previewType = "";
      this.previewUrl = "";
      if(name.indexOf("pdf") != -1) {
        this.previewType = 1;
        axios({
          method: 'get',
          responseType: 'blob',
          url: 接口地址,
          params: 传参
        }).then(({data}) => {
          let blob = new Blob([data], { type: "application/pdf" });
          this.previewUrl = URL.createObjectURL(blob);
        });
      } else if(name.indexOf("xls") != -1) {
        this.previewType = 2;
        axios({
          method: 'get',
          responseType: 'arraybuffer', // 设置响应体类型为arraybuffer
          url: 接口地址,
          params: 传参
        }).then(({data}) => {
          let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
          var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
          this.excelHtml = XLSX.utils.sheet_to_html(worksheet); // 渲染
        });
      } else if(name.indexOf("docx") != -1) {
        this.previewType = 3;
        axios({
          method: 'get',
          responseType: 'blob', // 设置响应文件格式
          url: 接口地址,
          params: 传参
        }).then(({data}) => {
          docx.renderAsync(data,this.$refs.word) // 渲染到页面预览
        });
      }
    },