sa-file-previewer

SaFilePreviewer

一款基于vue-office 和 vue-pdf-embed对 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>

组件提供了rendered和error事件，可以做业务的loding处理

参数接口

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

export 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;
}

export interface PdfOptions {
  /**
   * 是否使用iframe预览pdf文件，默认使用`vue-pdf-embed`
   *
   * @default false
   */
  useIframe?: boolean;
}

export interface PdfProps extends BaseProps {
  pdfOptions?: PdfOptions;
}

export interface Props extends BaseProps, ExcelProps, PdfProps {}

基于

Vue3

Vue-Office

vue-pdf-embed