上传功能实现之后，我们再看预览功能。我们需求是点击预览按钮之后跳到一个新页面进行预览，我先是对文件是否为空是否没上传进行了一个判断拦截，由于预览页面组件与当前页面组件既非父子关系，又非爷孙关系，八竿子打不着的关系，我们就不能通过绑定和sessionStorage来进行流文件的传递，只能在预览页面再发一次请求获取文件流，我们可以把参数通过路由带上，预览按钮对应的方法代码如下：

  preview() {
      console.log("预览", this.fileList, this.tuopuForm);
      if (!this.fileList) {
        this.$message.error(
          "拓扑图文件为空不能预览,请先上传拓扑图文件后再预览",
          6000
        );

        return false;
      }

      this.$router.push({
        path: "TuotpPreview",
        query: {
          fileName: this.tuopuForm.fileName,
          fileUrl: this.tuopuForm.fileUrl
        }
      });
    }

再来看预览页面，也就是TuotpPreview.vue组件。word预览比较简单，先通过命令cnpm i docx-preview --save安装插件docx-preview，需要注意的是这个插件只能预览后缀为docx的word文件，如果是doc后缀格式的word文件一定要让后端强制将上传doc格式的文件改为docx格式，然后当前页面组件就直接import { defaultOptions, renderAsync } from “docx-preview”;引入，最后在data里进行docxOptions配置，然后在页面上 要显示的div上绑定一个 id="bodyContainer"的，因为下面要通过document.getElementById来获取dom并操作dom，最后调用renderAsync方法即可。

cnpm i docx-preview --save //安装word预览插件docx-preview
import { defaultOptions, renderAsync } from "docx-preview"; //引入docx-preview插件对应的方法
 docxOptions: {
        className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
        inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
        ignoreWidth: false, // boolean：禁用页面的渲染宽度
        ignoreHeight: false, // boolean：禁止渲染页面高度
        ignoreFonts: false, // boolean：禁用字体渲染
        breakPages: true, // boolean：在分页符上启用分页
        ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
        experimental: false, // boolean：启用实验功能（制表符停止计算）
        trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明
        useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
        useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
        showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
        debug: false // boolean：启用额外的日志记录
  },

pdf文件的预览是通过获取到blob文件流之后，直接通过window.open打开新窗口，通过浏览器就能预览pdf，还有一种就是我现在的这种需求，要在页面上预览pdf，那就需要通过iframe,然后把blob流对应的src地址赋值回显即可。完整代码如下：

.app-container {
  .cardWhite {
    display: flex;
    flex-direction: column;

    .topArea {
      display: flex;
      position: relative;
      .backBox {
        margin-bottom: 1rem;
        img {
          cursor: pointer;
        }
      }

      .titleBox {
        text-align: center;
        background: #fff;
        color: #000000;
        position: absolute;
        top: 0;
        left: 50%;
        width: auto;
      }
    }
  }
}