file-preview-all 文件预览工具库

一款专为 Vue3 设计的多功能文件预览工具库，支持 PDF、Word、Excel（含旧版 XLS）、图片、代码类文件（JSON/XML/SQL/CSV 等）预览，采用模块化设计，易于扩展，风格统一且质感高级。

特性

• 📊 全面支持：PDF、DOCX、XLSX、XLS、JPG/PNG/GIF/WebP、JSON/XML/SQL/CSV/TXT
• 🎨 主题适配：内置明暗两种主题，灰色质感设计，视觉统一
• 🚀 模块化：每种文件类型独立模块，支持按需注册 / 扩展
• 🎯 Vue3 原生支持：封装 Vue3 组件，支持响应式配置
• 🔧 丰富配置：支持缩放、分页、行号、自适应等自定义配置
• 💡 友好交互：加载动画、错误提示、图片放大缩小、PDF 分页切换
• 📦 轻量可靠：基于 NPM 依赖，无 CDN 依赖，错误处理完善

安装

NPM 安装

bash

运行

npm install  --save

快速使用

1. Vue3 组件方式（推荐）

vue

<template>
  <div class="file-preview-demo">
    <!-- 文件选择器 -->
    <input
      type="file"
      @change="handleFileSelect"
      accept=".pdf,.docx,.xlsx,.xls,.json,.xml,.sql,.csv,.txt,image/*"
      class="file-input"
    />

    <!-- 文件预览组件 -->
    <FilePreview
      :file="selectedFile"
      container-height="700px"
      theme="light"
      :pdf-config="{ scale: 1.1, pageMode: 'auto' }"
      :excel-config="{ maxRows: 800, maxColumns: 40 }"
      :image-config="{ showOriginalBtn: true, maxScale: 2.5 }"
      @error="handlePreviewError"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FilePreview from 'file-preview-lib'; // 导入Vue3组件

const selectedFile = ref(null);

// 处理文件选择
const handleFileSelect = (e) => {
  const file = e.target.files[0];
  if (file) {
    selectedFile.value = file;
  }
};

// 处理预览错误
const handlePreviewError = (err) => {
  alert(`预览失败：${err.message}`);
};
</script>

<style scoped>
.file-preview-demo {
  padding: 20px;
}
.file-input {
  margin-bottom: 20px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

2. 原生 JS 方式（无 Vue3 依赖）

javascript

运行

import { createFilePreview } from 'file-preview-lib';

// 初始化预览实例（传入容器选择器或DOM元素）
const previewInstance = createFilePreview('#preview-container', {
  theme: 'dark',
  maxFileSize: 50, // 50MB
  pdf: { scale: 1.0, pageMode: 'single' },
  onError: (err) => console.error('预览失败：', err)
});

// 监听文件选择
document.getElementById('file-input').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    previewInstance.preview(file);
  }
});

完整配置说明

全局配置（组件 props / 核心实例配置）

| 配置项 | 类型 | 默认值 | 说明 | | --------------- | -------- | ------------ | ---------------------------------------- | | theme | string | 'light' | 主题：'light'（亮色） / 'dark'（暗色） | | maxFileSize | number | 50 | 最大文件大小（单位：MB） | | containerWidth | string | '100%' | 预览容器宽度（仅 Vue3 组件支持） | | containerHeight | string | '600px' | 预览容器高度（仅 Vue3 组件支持） | | onSuccess | Function | () => {} | 预览成功回调 | | onError | Function | (err) => {} | 预览失败回调（参数为错误对象） | | onUnsupported | Function | (type) => {} | 不支持的文件类型回调（参数为文件扩展名） |

各模块独立配置

PDF 模块（pdfConfig）

| 配置项 | 类型 | 默认值 | 说明 | | -------- | ------ | -------- | ----------------------------------------------- | | scale | number | 1.0 | 初始缩放比例 | | pageMode | string | 'single' | 分页模式：'single'（单页） / 'auto'（全部渲染） |

Excel 模块（excelConfig）

| 配置项 | 类型 | 默认值 | 说明 | | ---------- | ------- | ------ | ------------------------------ | | maxRows | number | 1000 | 最大展示行数 | | maxColumns | number | 50 | 最大展示列数 | | showHeader | boolean | true | 是否显示表头（第一行作为表头） |

图片模块（imageConfig）

| 配置项 | 类型 | 默认值 | 说明 | | --------------- | ------- | --------- | -------------------------------------------------------------- | | fit | string | 'contain' | 适配方式：'contain'（包含） / 'cover'（覆盖） / 'fill'（填充） | | showOriginalBtn | boolean | true | 是否显示 "查看原图" 放大按钮 | | maxScale | number | 3 | 原图最大缩放比例 |

代码模块（codeConfig）

| 配置项 | 类型 | 默认值 | 说明 | | ----------- | ------- | ------ | ---------------- | | lineNumbers | boolean | true | 是否显示代码行号 | | highlight | boolean | true | 是否启用代码高亮 |

Word 模块（wordConfig）

| 配置项 | 类型 | 默认值 | 说明 | | ------------ | ------- | ------ | ---------------------------------- | | ignoreWidth | boolean | true | 是否忽略 Word 文档原始宽度 | | ignoreHeight | boolean | true | 是否忽略 Word 文档原始高度 | | inWrapper | boolean | true | 是否使用包装器渲染（优化样式适配） |

支持的文件格式

| 模块 | 支持格式 | 依赖库 | | ---------- | ------------------------------------ | ------------ | | PDF 预览 | .pdf | pdfjs-dist | | Word 预览 | .docx | docx-preview | | Excel 预览 | .xlsx、.xls（旧版） | xlsx | | 图片预览 | .jpg、.jpeg、.png、.gif、.bmp、.webp | 原生 API | | 代码预览 | .json、.xml、.sql、.csv、.txt | highlight.js |

扩展指南：新增自定义文件类型

基于模块化设计，可快速新增自定义文件预览模块：

步骤 1：创建自定义模块（如 TXT 模块）

javascript

运行

// src/modules/TxtPreview.js
export const TxtPreview = async ({ core, file, container, config }) => {
  // 读取TXT内容
  const content = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsText(file, 'utf-8');
  });

  // 渲染TXT内容（可复用CodePreview的渲染逻辑）
  container.innerHTML = `
    <div style="background: var(--code-bg); padding: 20px; border-radius: 8px; font-family: monospace; line-height: 1.6;">
      ${content.replace(/\n/g, '<br>').replace(/ /g, ' ')}
    </div>
  `;
};

步骤 2：注册模块

javascript

运行

import { FilePreviewCore, TxtPreview } from 'file-preview-lib';

const previewInstance = new FilePreviewCore('#container');
// 注册TXT模块
previewInstance.registerModule('txt', TxtPreview);

构建工具配置说明

Vite 配置（处理 pdfjs worker）

在 vite.config.js中添加 alias 配置：

javascript

运行

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 配置pdfjs worker路径
      'pdfjs-dist/build/pdf.worker.entry': 'pdfjs-dist/build/pdf.worker.entry.js'
    }
  }
});

Webpack 配置（处理 pdfjs worker）

在 webpack.config.js中添加 alias：

javascript

运行

module.exports = {
  resolve: {
    alias: {
      'pdfjs-dist/build/pdf.worker.entry': 'pdfjs-dist/build/pdf.worker.entry.js'
    }
  }
};

常见问题（FAQ）

1. 报错：Failed to execute 'querySelector' on 'Document'

• 原因：容器参数传递错误（如传递非 DOM 元素 / 非选择器字符串）
• 解决方案：确保传递有效的 DOM 元素（Vue3 组件通过 ref 自动处理，原生 JS 传递选择器字符串或 DOM 元素）

2. 报错：Cannot read properties of undefined (reading 'read')

• 原因：xlsx 依赖导入方式错误
• 解决方案：确保使用最新版本的工具库，无需手动修改依赖导入，工具库已修复该问题

3. PDF 预览空白 / 加载失败

• 原因：pdfjs worker 路径配置错误
• 解决方案：按「构建工具配置说明」配置 worker 路径