basic-file-preview 1.0.0

package/README.md

@@ -0,0 +1,74 @@
+# Basic File Preview
+
+> 这是一个基于 vue3、element-plus 封装的文件预览组件，目前仅支持预览以（pdf、docx、xlsx、pptx、txt、json、md）格式结尾的文件以及常规格式的图片，并提供水印功能（水印可根据业务需求自行选择使用）。
+
+## 安装
+
+```shell
+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调用（推荐）
+
+```vue
+<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>
+
+```
+
+示例二：组件
+
+```vue
+<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>
+
+```