# vue-file-priview-demo

**Repository Path**: ttddss2019/vue-file-priview-demo

## Basic Information

- **Project Name**: vue-file-priview-demo
- **Description**: 使用vue-office组件预览pptx，docx，pdf，xlsx文件。增加翻页、放缩功能
- **Primary Language**: 其他
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-11
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-file-priview-demo

#### 介绍

  在给一个大学室友表哥写一个文档预览的网站时，找翻页缩放功能的文档预览前端组件找了好久，翻页的只有pdf支持的比较友好，docx、pptx、xlsx都没找到翻页功能。有找过通过部署后端服务方式预览的方式，但感觉不太方便，放弃了。docx分页部分不支持，看文档分页方式了。pptx部分页面也可能有显示问题，得等vue-office作者啥时候更新好了，凑合用吧。

  使用[vue-office](https://501351981.github.io/vue-office/examples/docs/guide/) [pptx-preview](https://github.com/501351981/pptx-preview)组件预览pptx，docx，pdf，xlsx文件。增加翻页、放缩功能的一个demo。

  翻页功能因为手动获取元素滚动的，所以如果后面vue-office组件有更新，可能会有兼容性问题。






#### 使用说明

```bash
# 安装依赖
npm install

# 启动服务
npm run dev
```


#### 预览图

开始页面  
![开始页面](my-vue-app/doc/images/image.png)

docx文件预览  
![输入图片说明](my-vue-app/doc/images/docxpreview.png)

pdf文件预览  
![输入图片说明](my-vue-app/doc/images/pdfpreview.png)

pptx文件预览  
![输入图片说明](my-vue-app/doc/images/pptxpreview.png)

xlsx文件预览  
![输入图片说明](my-vue-app/doc/xlsxpreview.png)