├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── index.html ├── package.json ├── packages ├── Lang.ts ├── assets │ ├── more.svg │ ├── pdf │ │ └── loading-icon.gif │ └── search.svg ├── component.ts ├── components │ ├── download.vue │ ├── image.vue │ ├── pageNum.vue │ ├── pdf.vue │ ├── pdfNavContainer.vue │ ├── pdfNavigation.vue │ ├── pdfScale.vue │ ├── pdfTarget.vue │ ├── pdfTool.vue │ ├── print.vue │ ├── search.vue │ └── selectPopup.vue ├── config.ts ├── index.ts ├── utils │ └── index.ts └── vite-e.d.ts ├── pnpm-lock.yaml ├── public └── vite.svg ├── src ├── App.vue ├── assets │ ├── 1748352797096.pdf │ ├── Owners_Manual.pdf │ ├── demo.gif │ ├── pdf.worker.min.js │ ├── test2.pdf │ └── vue.svg ├── main.ts ├── style.css └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── tsconfig.types.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @sunsetglow/vue-pdf-viewer 2 | 3 | 用来预览 pdf 文件,开箱即用,无需多余的开发,操作简单,支持 vue3 vite, 4 | 5 | ## installation 6 | 7 | ``` 8 | pnpm i @sunsetglow/vue-pdf-viewer 9 | 10 | yarn add @sunsetglow/vue-pdf-viewer 11 | 12 | npm i @sunsetglow/vue-pdf-viewer 13 | ``` 14 | 15 | ## 🎊 功能介绍 16 | 17 | - 支持搜索,文本复制,自定义水印,打印,下载,缩放,左侧导航,分页等功能 18 | - pdf 渲染采用虚拟列表,可以使你轻松展示大文件 pdf 19 | 20 | ## ⭐ demo 21 | 22 |  23 | 24 | ## 🌰 example 25 | 26 | ```vue 27 | 28 | 29 | 30 | 172 | 173 | 180 | ``` 181 | 182 | ## 参数说明 183 | 184 | | 参数名称 | 内容 说明 | 185 | | ----------: | -------------------------------------------------- | 186 | | loadFileUrl | pdf 文件路径 or ArrayBuffer or Uint8Array(必选) | 187 | | pdfPath | pdf.js 里所需的 pdf.worker.min.js 指向地址(必选) | 188 | | pdfOption | pdf 的配置选项 (可选) | 189 | | loading | pdf 加载完成执行函数 (可选) | 190 | 191 | ## api 事件说明 192 | 193 | - 对外开放 api 通一在 configPdfApiOptions 对象上 194 | 195 | ```ts 196 | import { configPdfApiOptions } from "@sunsetglow/vue-pdf-viewer"; 197 | /** 198 | * 控制pdf 跳到指定页码 199 | * @param index 200 | * 类型 number 201 | */ 202 | configPdfApiOptions.handleChange(1); 203 | /** 204 | * 搜索内置函数(在loading 函数里调用) 205 | * @param keyword 搜索内容 206 | * @param visible 是否展示搜索框 true 207 | */ 208 | configPdfApiOptions.onSearch("产品力成为推动其发展", false); 209 | ``` 210 | 211 | ## 🎆 欢迎大家的使用 212 | 213 | - 如果帮助到你,帮忙点个 star ,有任何改进可直接提 issue 或者私信邮箱 wyaoting999@163.com 214 | 215 | - github 仓库地址 [sunsetglow-vue-pdf-viewer](https://github.com/wyaoting/sunsetglow-vue-pdf-viewer) 216 | 217 | ## 🌹🌹 致谢 218 | 219 | - 此库基于 [pdf.js](https://github.com/mozilla/pdf.js) 进行二次封装感谢大佬的开源贡献精神 220 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |{{ t("Preparing") }}
13 |