Gathering detailed insights and metrics for th-file-preview
Gathering detailed insights and metrics for th-file-preview
Installations
npm install th-file-previewDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
18.16.0
NPM Version
9.5.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.0.6
Package Id
th-file-preview@0.0.6
Unpacked Size
6.50 MB
Size
1.57 MB
File Count
18
NPM Version
9.5.1
Node Version
18.16.0
Published on
Nov 10, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
th-file-preview
JavaScript file viewer
Getting started
Installation
1npm install th-file-preview
Use
1const app = createApp(App) 2import thFilePreview from 'th-file-preview' 3import '../node_modules/th-file-preview/lib/index.css' 4app.use(thFilePreview)
支持格式
png jpg jpeg docx doc xlsx xls pdf
注：doc xls 文件预览方案使用 office 预览服务 进行在线预览，文件链接需要公网能正常访问
使用插件
- viewerjs@1.11.6 - 图片文件大图预览
- docx-preview@0.1.20 - 解析 docx 文件
- xlsx@0.18.5 - 解析 xlsx 文件
- pdfjs-dist@2.5.207 - 解析 pdf 文件
相关组件
th-preview-image
1<th-preview-image 2 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.png" 3></th-preview-image> 4 5<!-- 使用 blob 时，建议传入文件名称 --> 6<th-preview-image blob="blob文件流" name="文件名"></th-preview-image> 7 8<th-preview-image 9 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.jpg" 10 model="dialog" 11></th-preview-image> 12 13<th-preview-image 14 :url="['http://192.168.0.192:9000/lowcode-dev/test-files/文件.png','http://192.168.0.192:9000/lowcode-dev/test-files/文件.jpg']" 15></th-preview-image>
th-preview-docx
1<th-preview-docx 2 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.docx" 3 @ready="handleReady" 4></th-preview-docx> 5 6<!-- 使用 blob 时，建议传入文件名称 --> 7<th-preview-docx blob="blob文件流" name="文件名"></th-preview-docx>
th-preview-xlsx
1<th-preview-xlsx 2 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.xlsx" 3 @ready="handleReady" 4></th-preview-xlsx> 5 6<!-- 使用 blob 时，建议传入文件名称 --> 7<th-preview-xlsx blob="blob文件流" name="文件名"></th-preview-xlsx>
th-preview-pdf
1<th-preview-pdf 2 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.pdf" 3 @ready="handleReady" 4></th-preview-pdf> 5 6<!-- 使用 blob 时，建议传入文件名称 --> 7<th-preview-pdf blob="blob文件流" name="文件名"></th-preview-pdf>
th-preview-office
1<th-preview-office 2 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.doc" 3 @ready="handleReady" 4></th-preview-office> 5 6<th-preview-office 7 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.xls" 8 @ready="handleReady" 9></th-preview-office>
th-preview-file
1<!-- Url 支持任意文件链接，通过链接后缀判断文件类型 --> 2<th-preview-file 3 url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.png" 4 @ready="handleReady" 5></th-preview-file> 6 7<!-- 使用 blob 时，建议传入文件名称 --> 8<th-preview-file blob="blob文件流" name="文件名"></th-preview-file>
No vulnerabilities found.
No security vulnerabilities found.