{"_id":"@ansstory/file-viewer","name":"@ansstory/file-viewer","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@ansstory/file-viewer","version":"0.0.1","private":false,"publishConfig":{"access":"public"},"type":"module","engines":{"node":"^20.19.0 || >=22.12.0"},"main":"dist/file-viewer.umd.js","module":"dist/file-viewer.es.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/file-viewer.es.js","require":"./dist/file-viewer.umd.js"},"./dist/file-viewer.css":"./dist/file-viewer.css"},"keywords":["vue","ansstory","file-viewer","svg","docx","xlsx","pdf","pptx","png","apng","bmp","jpg","jpe","jpeg","gif","webp","heif","mp4","webm","mov"],"author":{"name":"安生 story"},"license":"MIT","scripts":{"dev":"vite","build":"run-p type-check \"build-only {@}\" --","preview":"vite preview","build-only":"vite build","build-only:npm-w":"vite build -w --mode npm","build-only:npm":"vite build --mode npm","type-check":"vue-tsc --build","lint":"eslint . --fix --cache","format":"prettier --write --experimental-cli src/","docs:dev":"vitepress dev docs","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs"},"dependencies":{"@vue-office/docx":"^1.6.3","@vue-office/excel":"^1.7.14","@vue-office/pdf":"^2.0.10","@vue-office/pptx":"^1.0.1","@vue-styled-components/core":"^1.13.3","vue":"^3.5.26","vue-demi":"^0.14.6","@iconify/vue":"^5.0.0"},"devDependencies":{"@microsoft/api-extractor":"^7.55.2","@tsconfig/node24":"^24.0.3","@types/node":"^24.10.4","@vitejs/plugin-vue":"^6.0.3","@vitejs/plugin-vue-jsx":"^5.1.3","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.6.0","@vue/language-core":"~3.0.1","@vue/tsconfig":"^0.8.1","ajv":"^8.13.0","eslint":"^9.39.2","eslint-plugin-vue":"~10.6.2","jiti":"^2.6.1","npm-run-all2":"^8.0.4","prettier":"3.7.4","sass-embedded":"^1.97.3","typescript":"~5.9.3","unplugin-dts":"^1.0.0-beta.6","vite":"^7.3.0","vite-plugin-vue-devtools":"^8.0.5","vitepress":"^1.6.4","vue-tsc":"^3.2.2"},"volta":{"node":"20.19.2"},"_id":"@ansstory/file-viewer@0.0.1","gitHead":"6fb21ee93ad2fba67d234a09565e538c8caf5005","description":"> - 支持多种文件: `png,apng,bmp,jpg,jpe,jpeg,gif,svg,webp,heif,mp4,webm,mov,docx,xlsx,pdf,pptx`预览的vue3组件 > - 其中`docx,xlsx,pdf,ppt`来自大佬[@vue-office](https://github.com/501351981/vue-office) > - 对于`@vue-office中pdf`不兼容的浏览器使用`embed`进行兜底","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-gh2eQBjt4aTSmlsNXVi7MS1V85raO0iXT5TgpGgBDNC98JnXg6JOYT6AAATrH612DFbe18bQ2DEuKTJBNgMoKQ==","shasum":"353e30eb4df280b09091b13cb68a23bd11414d5d","tarball":"https://registry.npmjs.org/@ansstory/file-viewer/-/file-viewer-0.0.1.tgz","fileCount":9,"unpackedSize":58681,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF55ueAHaDgSrk2vBAXGnBh/rAQjYTOQu/XxB5bm0NZmAiEA0cpT8jTAt2I1nPhCyDP0TnC39iEURyCyiWsZHO+xacg="}]},"_npmUser":{"name":"ansstory","email":"story0809@163.com"},"directories":{},"maintainers":[{"name":"ansstory","email":"story0809@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/file-viewer_0.0.1_1770100733714_0.15291376644891153"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-03T06:38:53.650Z","0.0.1":"2026-02-03T06:38:53.855Z","modified":"2026-02-03T06:38:54.020Z"},"maintainers":[{"name":"ansstory","email":"story0809@163.com"}],"description":"> - 支持多种文件: `png,apng,bmp,jpg,jpe,jpeg,gif,svg,webp,heif,mp4,webm,mov,docx,xlsx,pdf,pptx`预览的vue3组件 > - 其中`docx,xlsx,pdf,ppt`来自大佬[@vue-office](https://github.com/501351981/vue-office) > - 对于`@vue-office中pdf`不兼容的浏览器使用`embed`进行兜底","keywords":["vue","ansstory","file-viewer","svg","docx","xlsx","pdf","pptx","png","apng","bmp","jpg","jpe","jpeg","gif","webp","heif","mp4","webm","mov"],"author":{"name":"安生 story"},"license":"MIT","readme":"# 简介[docs](https://ansstory.github.io/npm-file-viewer-md/)\n\n> - 支持多种文件: `png,apng,bmp,jpg,jpe,jpeg,gif,svg,webp,heif,mp4,webm,mov,docx,xlsx,pdf,pptx`预览的vue3组件\n> - 其中`docx,xlsx,pdf,ppt`来自大佬[@vue-office](https://github.com/501351981/vue-office)\n> - 对于`@vue-office中pdf`不兼容的浏览器使用`embed`进行兜底\n\n```text\npng,apng,bmp,jpg,jpe,jpeg,gif,svg,webp,heif,mp4,webm,mov,docx,xlsx,pdf,pptx\n```\n\n## 安装\n\n```sh\nnpm install @ansstory/file-viewer\n```\n\n## 使用示例\n\n```js\n// 全局引入自动注册\nimport FileViewer from '@ansstory/file-viewer'\nimport '@ansstory/file-viewer/dist/file-viewer.css'\napp.use(FileViewer, {\n  // 全局配置\n  name: 'FileViewer', // 组件名\n  hiddenArrow: false, // 是否隐藏箭头\n  hiddenFileName: false, // 是否隐藏文件名\n  zIndex: 9999, // 弹窗的 z-index\n  fileApi: '', // 内部已做兼容处理：非全地址则拼接代理\n  infinite: false, // 是否可以无限循环预览\n  zoomRate: 0.1, // 缩放比例\n  maxScale: 6, // 最大缩放比例\n  minScale: 0.2, // 最小缩放比例\n  teleported: false, // 是否插入至 body 元素上\n  // toolbar: true, // 是否显示工具栏\n  toolbar: ['dArrowLeft', 'zoomOut', 'zoomIn', 'reset', 'rotateLeft', 'rotateRight', 'mirror', 'download', 'dArrowRight'], // 或者自定义工具栏\n  displayFileName(url) {\n    // 你可以在此重写预览的文件名\n    // url = '/static/测试文件_4342343.pdf' // 默认展示：测试文件.pdf\n    const lastSlashIndex = url.lastIndexOf('/')\n    if (lastSlashIndex === -1) {\n      return url\n    }\n    return url.substring(lastSlashIndex + 1)\n  },\n})\n```\n\n```html\n<script setup lang=\"ts\">\n  // 或者 单文件引入\n  import { FileViewer } from '@ansstory/file-viewer'\n  import '@ansstory/file-viewer/dist/file-viewer.css'\n  import { ref, useTemplateRef } from 'vue'\n  // 逗号分割的字符串\n  // const fileList = ref('https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com/Bom/bom/2022/1/19/2022011911370824626513.pdf')\n  // 或者\n  const fileList = ref(['https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com/Bom/bom/2022/1/19/2022011911370824626513.pdf'])\n  const FileViewerRef = useTemplateRef('FileViewerRef')\n  const openFileViewer = () => {\n    FileViewerRef.value?.open()\n  }\n  const displayFileName = (url) => {\n    const fileName = url?.split('/')?.pop()\n    return fileName?.replace(/_.*?\\./, '.') || url\n  }\n</script>\n\n<template>\n  <button type=\"primary\" @click=\"openFileViewer\">open</button>\n  <!-- ! props将覆盖全局配置 -->\n  <FileViewer ref=\"FileViewerRef\" :urls=\"fileList\" fileApi=\"/zzz\" :maxScale=\"8\" :displayFileName=\"displayFileName\" />\n</template>\n```\n\n## Attributes\n\n| 参数            | 说明                        | 类型                          | 可选值                                                                                                                            | 默认值                                                                                                           |\n| --------------- | --------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| urls            | 文件地址                    | `string/array`                | -                                                                                                                                 | `''`                                                                                                             |\n| urlIndex        | 预览第几个文件(索引)        | `number`                      | -                                                                                                                                 | `0`                                                                                                              |\n| minScale        | 预览文件的最小缩放比例      | `number`                      | -                                                                                                                                 | `0.2`                                                                                                            |\n| zoomRate        | 缩放倍数                    | `number`                      | -                                                                                                                                 | `0.1`                                                                                                            |\n| maxScale        | 预览文件的最大缩放比例      | `number`                      | -                                                                                                                                 | `4`                                                                                                              |\n| hiddenFileName  | 隐藏文件名称                | `boolean`                     | -                                                                                                                                 | `false`                                                                                                          |\n| hiddenArrow     | 隐藏左右箭头                | `boolean`                     | -                                                                                                                                 | `false`                                                                                                          |\n| infinite        | 是否可以无限循环预览        | `boolean`                     | -                                                                                                                                 | `false`                                                                                                          |\n| teleported      | 是否插入至 `body` 元素上    | `boolean`                     | -                                                                                                                                 | `false`                                                                                                          |\n| zIndex          | 设置图片预览的 `z-index`    | `number`                      | -                                                                                                                                 | `9999`                                                                                                           |\n| fileApi         | 代理Api：非全地址则拼接代理 | `string`                      | -                                                                                                                                 | `''`                                                                                                             |\n| isWebDownload   | 是否前端下载                | `boolean`                     | -                                                                                                                                 | 当为`false`时可通过`download`自定义下载                                                                          |\n| toolbar         | 工具栏                      | `array/boolean`               | `['dArrowLeft', 'zoomOut', 'zoomIn', 'reset', 'rotateLeft', 'rotateRight', 'mirror', 'download', 'dArrowRight'] or true or false` | `['dArrowLeft', 'zoomOut', 'zoomIn', 'reset', 'rotateLeft', 'rotateRight', 'mirror', 'download', 'dArrowRight']` |\n| displayFileName | 重写预览的文件名            | `Function(url:string):string` | -                                                                                                                                 | `url?.split('/')?.pop()?.replace(/_.*?\\./, '.')`                                                                 |\n\n## Events\n\n| 事件名   | 说明         | 参数                                                                               |\n| -------- | ------------ | ---------------------------------------------------------------------------------- |\n| close    | 关闭回调     | -                                                                                  |\n| switch   | 切换文件回调 | `{ index: number, url: string, fileName: string, fileType: string }`               |\n| download | 下载回调     | `{ index: number, url: string, fileName: string, fileType: string }`               |\n| load     | 加载完成回调 | `Event/undefined`                                                                  |\n| error    | 加载失败回调 | `{ index: number, url: string, fileName: string, fileType: string, error: Error }` |\n\n## Exposes\n\n| 事件名 | 说明 | 参数 |\n| ------ | ---- | ---- |\n| open   | 打开 | -    |\n| close  | 关闭 | -    |\n\n## Slots\n\n| 名称    | 说明           | 参数                                                                                                                                                                                               |\n| ------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| total   | 自定义操作区域 | `{ index: number; total: number; fileName: string; fileType: string }`                                                                                                                             |\n| toolbar | 自定义操作区域 | `{ scale: (num: number) => void reset: () => void prev: () => void next: () => void rotate: (num: number) => void mirror: () => void download: () => void setActiveIndex: (num: number) => void }` |\n","readmeFilename":"README.md","_rev":"1-80d944fc77fc3b895e84c3c8da2aa524"}