{"id":22455918,"url":"https://github.com/cycleccc/vue3-pdf-demo","last_synced_at":"2025-03-27T13:21:33.060Z","repository":{"id":266403787,"uuid":"898257986","full_name":"cycleccc/vue3-pdf-demo","owner":"cycleccc","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-04T06:09:53.000Z","size":2467,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T17:44:02.921Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cycleccc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-04T04:27:13.000Z","updated_at":"2024-12-15T00:29:09.000Z","dependencies_parsed_at":"2024-12-04T05:36:32.235Z","dependency_job_id":null,"html_url":"https://github.com/cycleccc/vue3-pdf-demo","commit_stats":null,"previous_names":["cycleccc/vue3-pdf-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cycleccc%2Fvue3-pdf-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cycleccc%2Fvue3-pdf-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cycleccc%2Fvue3-pdf-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cycleccc%2Fvue3-pdf-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cycleccc","download_url":"https://codeload.github.com/cycleccc/vue3-pdf-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245850361,"owners_count":20682647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T07:13:49.177Z","updated_at":"2025-03-27T13:21:33.038Z","avatar_url":"https://github.com/cycleccc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 运行截图\n![](./demo.png)\n\n# 如何使用\n\n- 安装\n~~~shell\npnpm install\n~~~\n\n- 启动测试环境\n~~~shell\npnpm run dev\n~~~\n\n- 打包发布\n~~~shell\npnpm run build\npnpm run deploy\n~~~\n\n# 软件设计说明书\n\n## 1. 项目概述\n\n该项目是一个基于 **Vue 3** 和 **Vite** 的 **PDF 预览应用**。用户可以上传 PDF 文件，并在浏览器中实时查看 PDF 内容，支持翻页、缩放、下载、打印等功能。该应用使用 `pdfjs-dist` 库进行 PDF 渲染，具有简洁直观的 UI 和交互。\n\n## 2. 目标与功能\n\n### 2.1 目标\n\n开发一个基于 Vue 3 和 Vite 的前端应用，提供以下功能：\n\n- 上传 PDF 文件并进行预览。\n- 支持 PDF 文件的翻页、缩放功能。\n- 支持打印和下载 PDF 文件。\n\n### 2.2 功能需求\n\n1. **文件上传功能**：\n   - 用户能够上传本地 PDF 文件。\n   - 通过 `\u003cinput type=\"file\"\u003e` 组件实现文件选择功能。\n\n2. **PDF 渲染**：\n   - 使用 `pdfjs-dist` 库渲染 PDF 文件。\n   - 将 PDF 内容绘制到 HTML `\u003ccanvas\u003e` 元素中。\n\n3. **翻页功能**：\n   - 用户可以通过点击“上一页”和“下一页”按钮切换 PDF 页面。\n   - 用户可以通过输入页码并按回车键跳转到指定页面。\n\n4. **缩放功能**：\n   - 用户可以通过点击“放大”和“缩小”按钮调整 PDF 页面大小。\n   - 页面缩放时保持内容清晰。\n\n5. **下载功能**：\n   - 用户能够下载当前显示的 PDF 文件。\n\n6. **打印功能**：\n   - 用户能够将 PDF 文件发送到打印机进行打印。\n\n---\n\n## 3. 系统架构\n\n该项目采用前端单页面应用（SPA）架构，基于 Vue 3 和 Vite 进行开发。所有操作（如文件上传、页面渲染、交互）都通过客户端完成，无需服务器端支持。\n\n### 3.1 前端框架与技术栈\n\n- **Vue 3**：前端框架，基于 Vue Composition API 构建组件和逻辑。\n- **Vite**：前端构建工具，快速启动开发环境。\n- **pdfjs-dist**：用于 PDF 文件渲染的第三方库，负责将 PDF 渲染到 `\u003ccanvas\u003e` 上。\n- **HTML/CSS**：基础的网页结构和样式。\n\n---\n\n## 4. 详细设计\n\n### 4.1 组件设计\n\n项目包含以下主要组件：\n\n1. **PdfViewer.vue**：\n   - 用于展示 PDF 文件内容和处理所有交互功能。\n   - 主要包含上传文件、控制栏（翻页、缩放）、PDF 渲染区域。\n\n2. **控制栏**：\n   - 包含按钮和输入框，用户可以操作翻页、缩放以及跳转到指定页面。\n\n3. **Canvas 区域**：\n   - 使用 `\u003ccanvas\u003e` 元素来渲染 PDF 页面。\n   - 每次用户翻页或缩放时，更新 `\u003ccanvas\u003e` 渲染的内容。\n\n### 4.2 数据流设计\n\n1. **文件加载**：\n   - 用户选择文件后，使用 `FileReader` 读取 PDF 文件内容。\n   - 使用 `pdfjsLib.getDocument()` 加载 PDF 文件。\n\n2. **页面渲染**：\n   - 获取 PDF 文件的页数。\n   - 根据当前页码渲染 PDF 页面到 `\u003ccanvas\u003e` 上。\n\n3. **翻页与缩放**：\n   - 用户点击翻页按钮时，更新当前页码，并重新渲染该页。\n   - 缩放时，调整 `scale` 值并重新渲染当前页。\n\n4. **打印与下载**：\n   - 使用浏览器的内建打印功能 (`window.print()`) 打印当前页。\n   - 使用 `FileSaver.js`（或浏览器默认下载功能）实现文件下载功能。\n\n### 4.3 样式设计\n\n1. **PDF 显示区域**：\n   - 使用 `canvas` 元素渲染 PDF 页面，保证 PDF 页面在不同分辨率下显示清晰。\n   - 控制区域位于页面上方，保持布局整洁。\n   \n2. **控制栏**：\n   - 按钮使用标准样式，并确保具有响应式设计，在不同屏幕尺寸下良好显示。\n   - 页码输入框和总页数显示在同一行，确保操作简便。\n\n---\n\n## 5. 接口设计\n\n### 5.1 文件上传接口\n\n- **接口描述**：通过文件输入框上传 PDF 文件。\n- **输入参数**：用户选择的 PDF 文件。\n- **输出参数**：读取到的 PDF 文件数据。\n- **处理逻辑**：\n  - 使用 `FileReader` 读取文件内容。\n  - 使用 `pdfjsLib` 加载文件并渲染。\n\n### 5.2 渲染页面接口\n\n- **接口描述**：通过 `pdfjsLib.getPage()` 获取并渲染指定页码的 PDF 页面。\n- **输入参数**：当前页码、缩放比例。\n- **输出参数**：渲染的 Canvas 图形。\n- **处理逻辑**：\n  - 调用 `getPage()` 获取 PDF 页面的数据。\n  - 使用 `canvas.getContext('2d')` 渲染到 Canvas 元素上。\n\n---\n\n## 6. 测试计划\n\n### 6.1 功能测试\n\n- 测试 PDF 文件能否正确上传、读取和渲染。\n- 测试翻页、缩放、跳转到指定页面功能是否有效。\n- 测试文件下载和打印功能是否按预期工作。\n\n### 6.2 兼容性测试\n\n- 测试该应用在不同浏览器（Chrome、Firefox、Edge）和操作系统（Windows、Mac、Linux）上的兼容性。\n\n### 6.3 性能测试\n\n- 测试在大文件（如超过 100MB 的 PDF 文件）下应用的性能表现。\n\n---\n\n## 7. 安全与隐私\n\n- 上传的 PDF 文件将仅在前端处理，不会上传到服务器。\n- 不收集任何用户的敏感数据。\n\n---\n\n## 8. 部署与维护\n\n### 8.1 部署方式\n\n- 该应用将通过 GitHub Pages 部署，以静态网页形式提供访问。\n\n### 8.2 维护计划\n\n- 定期检查依赖库（如 `pdfjs-dist`）的版本更新，并进行必要的升级。\n- 根据用户反馈进行 UI/UX 的改进。\n\n---\n\n## 9. 版本控制\n\n| 版本 | 修改日期  | 备注           |\n| ---- | --------- | -------------- |\n| 1.0  | 2024-12-04 | 初始版本发布   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcycleccc%2Fvue3-pdf-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcycleccc%2Fvue3-pdf-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcycleccc%2Fvue3-pdf-demo/lists"}