Basic File Preview

这是一个基于 vue3、element-plus 封装的文件预览组件，目前仅支持预览以（pdf、docx、xlsx、pptx、txt、json、md）格式结尾的文件以及常规格式的图片，并提供水印功能（水印可根据业务需求自行选择使用）。

安装

npm i basic-file-preview
# or
pnpm i basic-file-preview

在使用 pnpm 安装 basic-file-preview 时，pnpm 会检测到 basic-file-preview 的依赖（@vue-office/docx, @vue-office/excel, @vue-office/pptx, vue-demi）中包含可执行的脚本，出于安全考虑，默认阻止了这些脚本的执行，会出现以下警告

Ignored build scripts: @parcel/watcher, @vue-office/docx, @vue-office/excel, @vue-office/pptx, esbuild, vue-demi. Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

建议运行 pnpm approve-builds 手动确认这些依赖包的脚本可以被信任并允许执行

用法

示例一：api调用（推荐）

<template>
  <div>
    <button @click="handlePreviewPdf">打开pdf</button>
  </div>
</template>

<script setup lang="ts">
import { preview } from 'basic-file-preview'
const handlePreviewPdf = () => {
  preview({
    name: '这是一个pdf.pdf',
    url: '/example/MySQL-基础篇.pdf',
    watermark: 'kunkun' // （可选）或数组形式，例如：['kunkun', '2026-04-04'],
  })
}
</script>

<style scoped></style>

示例二：组件

<template>
  <div>
    <button @click="handlePreviewPdf">打开pdf</button>
    <FilePreview
      v-model:visible="visible"
      name=" 这是一个pdf.pdf"
      url="/example/MySQL-基础篇.pdf"
      :watermark="watermark" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FilePreview } from 'basic-file-preview'
const visible = ref(false)
const watermark = ref('kunkun') 

const handlePreviewPdf = () => {
  visible.value = true
}
</script>

<style scoped></style>