@fast-snail/preview

一个文件预览插件

Usage

如果需要预览 xlsx 文件，package.json 中需添加依赖项

使用环境建议 >=es2018 的现代浏览器（待测）

在 vite 中

x-data-spreadsheet 需要

"less": ">=3.0.0",

在 vue-cli 中，webpack5

package.json

"less": ">=3.0.0",
"less-loader": "*", // 10.0.0
"@babel/plugin-transform-private-methods": ">=7.14.5",

同时 babel.config.js 文件添加

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'], // vue的，如果是别的则添加其他
  plugins: ['@babel/plugin-transform-private-methods'],
};

在其它不兼容环境下使用

请使用 umd 模式，此时上述的配置都可以不用，但会缺少 ts 语法提示

import * as FilePreview from '@fast-snail/preview/preview';
// or import { render } from '@fast-snail/preview/preview';
import '@fast-snail/preview/preview.css';

FilePreview.render('#render', {
  file: 'xxx',
});

如果你的框架不支持 package.json 的 exports

import * as FilePreview from '@fast-snail/preview/dist/umd/preview.min.js';
import '@fast-snail/preview/dist/umd/preview.min.css';

复制 preview.min.js 和 preview.min.css 直接使用

<link rel="stylesheet" href="./preview.min.css" />
<script src="./preview.min.js"></script>
<script>
  // 导出全局变量FilePreview
  FilePreview.render('#render', {
    file,
  });
</script>

使用示例

<input type="file" id="fileInput" />

<!-- 图片预览不需要 -->
<div
  id="render"
  style="margin: auto;  overflow: hidden auto; width: 900px; height: 900px"
></div>

import { render } from '@fast-snail/preview';

const input = document.getElementById('fileInput')!;

input.addEventListener('change', async (e) => {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0] as File;

  const previewInfo = await render(
    '#render',
    {
      file: URL.createObjectURL(file), // or file
      type: 'pdf', // 不传将自动识别
    },
    {
      // 非必传
      pdf: {
        scale: 1.5,
        loadAll: true,
      },
    },
  );

  //   返回类型还未处理好。后续可能会调整。
  //   is pdf
  //   document.getElementById('pre')?.addEventListener('click', () => {
  //     (previewInfo as any)?.prevPage?.();
  //   });
  //   document.getElementById('next')?.addEventListener('click', () => {
  //     (previewInfo as any)?.nextPage?.();
  //   });
});

Options

render

渲染文件方法

type BigType =
  | 'pdf'
  | 'ppt'
  | 'txt'
  | 'picture'
  | 'word'
  | 'excel'
  | 'video'
  | 'other';

function render(
  element: HTMLElement | string,
  { file, type, filename }: Omit<FileItem, 'contentType'>,
  options?: PreviewInfo,
): Promise<{ type: BigType } & any>;
/**
 * 根据不同文件类型返回不同的值
 * audio、txt、video返回对应的渲染dom
 * picture返回预览viewerjs的实例
 * word返回docx-preview的renderAsync函数返回值
 * pdf返回{
 *  pdf,
 *  nextPage, // 单页渲染时，渲染下一页的方法
 *  prevPage,
 *  jumpPage,
 *  renderAll, // 一次全部渲染的方法
 *  pdfInfo: {
 *    pdfDivWidth, // pdf宽度
 *    pdfPages, // pdf总页数
 *    nowPage, // 当前页码
 *  }
 * }
 * excel返回xs为x-data-spreadsheet的实例
 */

PreviewInfo

type PreviewInfo = {
  pdf?: PdfOptions;
  word?: WordOptions;
  picture?: PictureOptions;
  excel?: ExcelOptions;
  txt?: TxtOptions;
  video?: VideoOptions;
  audio?: AudioOptions;
  fileParsing?: {
    /** 如果本插件渲染不了，是否跳转至微软预览地址 */
    canOffice?: boolean;
    /** 是否显示本插件无法预览 */
    showNoPreview?: boolean;
  };
} & PreviewOptionsOwned;

type PreviewOptionsOwned = {
  /** 成功 */
  success?: (e?: any) => void;
  /** 失败 */
  error?: (e: any) => void;
};

type PdfOptions = {
  // 缩放比例，基础为760px
  scale?: number;
  // 是否一次全部加载
  loadAll?: boolean;
} & PreviewOptionsOwned;

type WordOptions = {
  // npm包docx-preview配置
  styleContainer?: HTMLElement;
  // docx-preview配置
  userOptions?: Partial<Options>;
} & PreviewOptionsOwned;

type ExcelOptions = {
  /** npm包x-data-spreadsheet实例配置 */
  spreadsheet?: Options;
  transfer?: any;
} & PreviewOptionsOwned;

// npm包viewerjs
type PictureOptions = Viewer.Options & PreviewOptionsOwned;

指定类型 render

其它 render 目前只支持传 Blob，如果是视频、图片、音频、文字，则支持 string 类型

• renderAudio 音频
• renderExcel xlsx
• renderPdf pdf
• renderPicture 图片
• renderTxt 文本
• renderVideo 视频
• renderWord docx

function render(el: HTMLElement, file: Blob | string, options: XXXOptions = {});

fileTypeFromBlob

传入文件 Blob | File，返回文件的类型，包含 ext 和 mime。

getBigType

传入文件类型 mime，返回文件类型大类

"pdf" | "ppt" | "txt" | "picture" | "word" | "excel" | "video" | "other"

getFileInfo

获取文件信息

type FileItem = {
  file: Blob | string;
  contentType?: string | null;
  /** filename or Content-Disposition */
  filename?: string | null;
  /** getBigType返回的类型 */
  type?: string | null;
};

function getFileInfo(
  file: Blob | string,
  filename?: string | null,
  filetype?: string | null,
): Promise<FileItem>;

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# check your project for potential problems
$ pnpm run doctor

LICENSE

MIT