%20(2).svg)
项目简介
这是一个基于Vue的文件在线预览系统，能够实现文件的在线预览展示功能，支持多种常见文件格式，如PDF、PNG、JPEG、JPG、GIF、DOC、DOCX、PPT、PPTX、ELXS、ELX等。
项目的主要特性和功能
- 多格式支持：支持多种类型文件的在线预览，满足不同场景需求。
- 插件式集成：以插件形式全局引用，便于在Vue项目中集成使用。
- 展示模式多样：提供列表展示和文件预览两种模式，方便文件管理与查看。
- 可配置性：可控制是否开启删除功能、是否显示下载按钮等。
安装使用步骤
安装项目依赖
假设你已经下载了本项目的源码文件，执行以下步骤：
1. 进入项目目录：
bash
cd xd-file-preview
2. 安装依赖，建议使用淘宝镜像加速下载：
bash
npm install --save --registry=https://registry.npm.taobao.org
插件全局引用
在项目代码中添加以下代码全局引用插件：
javascript
import vueFilePreview from 'gxd-file-preview';
// 初始化自定义插件，（pdf.js,worker.js文件建议放在本地服务器），cdn有可能不稳定
Vue.use(vueFilePreview,{
pdf: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.min.js', // pdf插件
worker:'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.worker.min.js',// pdf.work插件
});
插件使用示例
在Vue组件中使用插件进行文件预览：
```vue
```
Nginx配置（静态资源跨域访问）
如果需要访问静态资源，需要做跨域处理，可参考以下Nginx配置示例： ```text server { listen 80; add_header 'Access-Control-Allow-Origin' '*'; location /Roboto/ { root /home/images; autoindex on; } }
location /img/ { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; expires 30d; root /Users/chokshen/Desktop/; error_log off; access_log /dev/null; autoindex on; } ```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】