Vue在线预览文件（docx/xlsx/pdf）

技术栈：Vue2 + vue-office + ElementUI

简介

在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现pdf、docx、xlsx文件的预览。
注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。
另外，网上资料有说：

为什么基本找不到doc或xls的在线预览，首先doc和xls是07版本前的格式，其次docx和xlsx是采用XML的开放文件格式进行存储，解析更容易。所以市面上基本都是docx和xlsx更容易找到方案，要能够预览doc和xls一般要花费较大的成本。

此博客只做简单的应用示例，更多需求的可参考文末的其他资料。

实现

安装vue-office插件

可以整体安装或者分开安装，vue-demi可同时兼容vue3和vue2的组件库

npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi
# 或者
npm install @vue-office/docx vue-demi
npm install @vue-office/excel vue-demi
npm install @vue-office/pdf vue-demi

页面布局

一个上传按钮跟上传文件提示，完成上传后，展示预览弹窗。

<template>
  <div class="vueOffice-container">
    <el-upload
      class="upload-demo"
      action=""
      accept=".pdf, .xlsx, .PDF, .docx"
      :on-change="handleChange"
      :file-list="fileList"
      :limit="1"
      multiple
    >
      <el-button type="primary">点击上传el-button>
      <div slot="tip" class="el-upload__tip">
        注意: 只能上传docx/pdf/xlsx文件，不支持doc文件
      div>
    el-upload>

    
    <el-dialog
      :title="'文件预览-' + fileName"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <div class="preview-box">
        
        <component
          :is="renderCom"
          :src="url"
          @rendered="rendered"
          @error="errorHandler"
          class="size-100"
        />
      div>
    el-dialog>
  div>
template>
<style scoped>
.preview-box {
  width: 100%;
  height: 50vh;
}
.size-100 {
  width: 100%;
  height: 100%;
}
.el-upload__tip {
  color: red;
}
style>

js逻辑

文件上传时触发handleChange事件，执行操作

1. 解析文件名匹配对应预览组件，利用previewFileCom函数
2. 设置预览文件的url
3. 展示预览弹窗
   预览组件渲染完成、渲染失败时分别调用rendered、errorHandler函数。

// 引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
// 引入相关样式
import "@vue-office/docx/lib/index.css";
// 引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
// 引入相关样式
import "@vue-office/excel/lib/index.css";
// 引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";
export default {
  name: "vueOffice",
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf,
  },
  data() {
    return {
      url: "",
      fileList: [],
      fileName: "",
      dialogVisible: false,
      renderCom: "VueOfficeDocx",
    };
  },
  methods: {
    rendered() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("预览渲染失败，请重试");
    },

    /**
     * 根据文件扩展名渲染指定预览组件
     *  */ 
    previewFileCom(filename) {
      this.fileName = filename;
      // 根据文件格式显示预览组件
      const fileExtension = filename.split(".").pop().toLowerCase();
      if (fileExtension === "xlsx") {
        this.renderCom = "VueOfficeExcel";
      }
      if (fileExtension === "docx") {
        this.renderCom = "VueOfficeDocx";
      }
      if (fileExtension === "pdf") {
        this.renderCom = "VueOfficePdf";
      }
    },

    // 上传文件
    handleChange(file) {
      this.previewFileCom(file.name);
      this.url = URL.createObjectURL(file.raw);
      this.dialogVisible = true; // 预览弹窗
    },
  },
};

效果

上传页面

点击上传按钮，上传文件，根据文件类型显示对应的预览效果。

docx

xlsx

pdf

参考资料

csdn博客 - vue在线预览文件，支持（docx、xlsx、pdf）