SaFilePreviewer

一款基于vue-office对 Vue3 项目中预览docx，xlsx，pdf文件的组件，支持 ts 代码提示，使用方式简单快捷。

安装

yarn add sa-file-previewer

使用

// main.ts

import SaFilePreviewer from "sa-file-previewer";
import "sa-file-previewer/dist/style.css";
...

app.use(SaFilePreviewer);

<!-- example.vue -->
<template>
    <FilePreviewer :fileUrl="xxxx.docx"></FilePreviewer>
</template>

<script setup lang="ts">
import { FilePreviewer } from "sa-file-previewer";

<script>

说明

如果fileUrl的链接包含文件后缀格式，即只需传递fileUrl参数即可，组件会根据链接地址推断文件格式，若文件地址不包含文件后缀格式，需显式传递fileType参数（string），目前支持格式为：

• docx
• xlsx
• pdf

当然，也可在业务侧先判断文件格式是否受支持，再做后续处理，例如：

<!-- example.vue -->
<template>
    <el-upload
      :on-preview="handleFilePreview"
      ...
    </el-upload>

    <FilePreviewer :fileUrl="xxxx.docx"></FilePreviewer>
</template>

<script setup lang="ts">
import { FilePreviewer, isFileSupported } from "sa-file-previewer";

const fileUrl = ref('xxx.xx')
const handleFilePreview = (file: UploadFile) => {
  const fileType = file.url.split(".").pop();
  if (isFileSupported(fileType)) {
    fileUrl.value = file.url;
    filePreviewDlg.openDialog();
  } else {
    ElMessage.error("不支持预览该格式文件");
  }
};
<script>

参数接口

enum SupportFileTypes {
  Docx = "docx",
  Pdf = "pdf",
  Xlsx = "xlsx",
}

interface BaseProps {
  /**
   * 文件url地址，需包含后缀
   */
  fileUrl: string;
  /**
   * 文件类型，默认根据url获取
   */
  fileType?: string;
  /**
   * 预览高度
   *
   *  @default '800px'
   */
  height?: string;
}

interface ExcelProps extends BaseProps {
  /**
   * Excel预览配置
   * 如果预览的文件是excel文件，则可以配置如下参数
   *
   * @example
   *  options:{
          minColLength?: number;  //excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
          showContextmenu?: boolean; //是否显示右键菜单，默认false
      },

      @reference https://501351981.github.io/vue-office/examples/docs/guide/js-preview.html
   */
  excelOptions?: any;
}

interface Props extends BaseProps, ExcelProps {}

基于

Vue3

Vue-Office