vue多附件预览（.pdf\.docx\.xlsx\.txt）

<!--
 * @Author: 赵成刚
 * @Date: 2022-04-29 11:05:23
 * @LastEditors: 赵成刚
 * @LastEditTime: 2022-05-25 16:38:10
 * @FilePath: \tz-purchase-web\src\components\AttachmentManagement\components\preview.vue
 * @Description: 预览组件
 * Copyright (c) ${2022} by ChenYu/天智AgileTeam, All Rights Reserved. 
-->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="''"
    :width="900"
    :showOkBtn="false"
    :showCancelBtn="false"
    destroyOnClose
  >
    <PageWrapper contentClass="flex">
      <!-- 文档 -->
      <template v-if="getFileType(preview.fileName) == 2">
        <div ref="docxfile"></div>
      </template>
      <!-- 表格 -->
      <template v-if="getFileType(preview.fileName) == 3">
        <div id="xlsxfile" ref="xlsxfile"></div>
      </template>
      <!-- pdf-->
      <template v-if="getFileType(preview.fileName) == 1">
        <iframe :src="preview.fileurl" width="100%" height="100%" frameborder="0"> </iframe>
      </template>
      <!-- 图片 -->
      <template v-if="getFileType(preview.fileName) == 4">
        <img :src="preview.fileurl" style="height: 500px; text-align: center" />
      </template>
      <!-- txt -->
      <template v-if="getFileType(preview.fileName) == 5">
        <div>{{ txtfile }}</div>
      </template>
    </PageWrapper>
  </BasicModal>
</template>

<script lang="ts" setup>
  // 引入axios用来发请求
  import axios from 'axios';
  // 引入docx-preview插件
  import { renderAsync } from 'docx-preview';
  // 引入xlsx插件
  import * as XLSX from 'xlsx';
  import { PageWrapper } from '/@/components/Page';
  import { reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal'; //弹窗
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    preview.fileurl = data.url;
    preview.fileName = data.fileName;
    typeDifferentiation(data);
    setModalProps({ confirmLoading: false });
  });
  const docxfile = ref(null);
  const xlsxfile = ref(null);
  const txtfile = ref('');
  const preview = reactive({
    pageNum: 1,
    pageTotalNum: 1, // 总页数
    loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    fileurl: '',
    fileName: '',
  });
  /**
   * 获取文件类型
   * @return {null|number}
   */
  function getFileType(val) {
    let fileName = val.lastIndexOf('.'); //取到文件名开始到最后一个点的长度
    let fileNameLength = val.length; //取到文件名长度
    let fileFormat = val.substring(fileName + 1, fileNameLength); //截
    if (fileFormat.toLowerCase() === 'pdf') {
      return 1;
    } else if (fileFormat.toLowerCase() === 'docx' || fileFormat.toLowerCase() === 'doc') {
      return 2;
    } else if (fileFormat.toLowerCase() === 'xlsx' || fileFormat.toLowerCase() === 'xls') {
      return 3;
    } else if (
      fileFormat.toLowerCase() === 'png' ||
      fileFormat.toLowerCase() === 'jpg' ||
      fileFormat.toLowerCase() === 'jpeg' ||
      fileFormat.toLowerCase() === 'gif'
    ) {
      return 4;
    } else if (fileFormat.toLowerCase() === 'txt') {
      return 5;
    } else if (fileFormat.toLowerCase() === 'ppt' || fileFormat.toLowerCase() === 'pptx') {
      return 6;
    }
    return null;
  }
  //类型区分
  function typeDifferentiation(data) {
    if (getFileType(data.fileName) == 2) {
      axios({
        method: 'get',
        responseType: 'blob', // 因为是流文件，所以要指定blob类型
        url: data.url, // 自己的服务器，提供的一个word下载文件接口
      }).then(({ data }) => {
        renderAsync(data, docxfile.value); // 渲染到页面
      });
    }
    if (getFileType(data.fileName) == 3) {
      axios({
        url: data.url,
        method: 'get',
        responseType: 'arraybuffer',
      }).then((res) => {
        var data = new Uint8Array(res.data);
        var workbook = XLSX.read(data, { type: 'array' });
        readWorkbook(workbook);
      });
    }
    if (getFileType(data.fileName) == 5) {
      axios({
        method: 'get',
        responseType: 'blob', // 因为是流文件，所以要指定blob类型
        url: data.url, // 自己的服务器，提供的一个word下载文件接口
      }).then(({ data }) => {
        data.text().then((res) => {
          txtfile.value = res;
        });
      });
    }
  }
  //  读取excel文件流-开始-
  function readWorkbook(workbook) {
    var sheetNames = workbook.SheetNames; // 工作表名称集合
    var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
    var csv = XLSX.utils.sheet_to_csv(worksheet);
    xlsxfile.value.innerHTML = csv2table(csv);
  }
  function csv2table(csv) {
    var html = "<table   class='table'>";
    var rows = csv.split('\n');
    rows.pop(); // 最后一行没用的
    rows.forEach(function (row, idx) {
      var columns = row.split(',');
      columns.unshift(idx + 1); // 添加行索引
      if (idx === 0) {
        // 添加列索引
        html += '<tr bgcolor="#ebeffb">';
        for (var i = 0; i < columns.length; i++) {
          html += '<th >' + (i === 0 ? '' : String.fromCharCode(65 + i - 1)) + '</th>';
        }
        html += '</tr>';
      }
      html += '<tr>';
      columns.forEach(function (column) {
        html += '<td>' + column + '</td>';
      });
      html += '</tr>';
    });
    html += '</table>';
    return html;
  }
  //  读取excel文件流-结束-
</script>

终极解决方案
kkfileview

1.需要后台搭建服务
2.前端vue页面使用  
2-1.import { Base64 } from 'js-base64';
2-2. window.open('http://www.sxjbjt.com:19504/bulk-purchase/fileview/onlinePreview?url=' + encodeURIComponent(Base64.encode('文件地址')));

vue2上回pdf后预览

import axios from 'axios'
传使用get请求，修改请求头类型来实现。
viewBtn(url) {
   axios({ url: url, responseType: 'blob', method: 'GET' }).then((data) => {
     let responseData = data.data
     let blob = new Blob([responseData], { type: 'application/pdf;charset=utf-8' })
     const href = URL.createObjectURL(blob)
     window.open(href, 'newWindow')
   })
 },