th-file-preview

JavaScript file viewer

Getting started

Installation

npm install th-file-preview

Use

const app = createApp(App)
import thFilePreview from 'th-file-preview'
import '../node_modules/th-file-preview/lib/index.css'
app.use(thFilePreview)

支持格式

png jpg jpeg docx doc xlsx xls pdf

注：doc xls 文件预览方案使用 office 预览服务 进行在线预览，文件链接需要公网能正常访问

使用插件

• [email protected] - 图片文件大图预览
• [email protected] - 解析 docx 文件
• [email protected] - 解析 xlsx 文件
• [email protected] - 解析 pdf 文件

相关组件

• th-preview-image
• th-preview-docx
• th-preview-xlsx
• th-preview-pdf
• th-preview-office
• th-preview-file

th-preview-image

<th-preview-image
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.png"
></th-preview-image>

<!-- 使用 blob 时，建议传入文件名称 -->
<th-preview-image blob="blob文件流" name="文件名"></th-preview-image>

<th-preview-image
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.jpg"
  model="dialog"
></th-preview-image>

<th-preview-image
  :url="['http://192.168.0.192:9000/lowcode-dev/test-files/文件.png','http://192.168.0.192:9000/lowcode-dev/test-files/文件.jpg']"
></th-preview-image>

th-preview-docx

<th-preview-docx
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.docx"
  @ready="handleReady"
></th-preview-docx>

<!-- 使用 blob 时，建议传入文件名称 -->
<th-preview-docx blob="blob文件流" name="文件名"></th-preview-docx>

th-preview-xlsx

<th-preview-xlsx
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.xlsx"
  @ready="handleReady"
></th-preview-xlsx>

<!-- 使用 blob 时，建议传入文件名称 -->
<th-preview-xlsx blob="blob文件流" name="文件名"></th-preview-xlsx>

th-preview-pdf

<th-preview-pdf
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.pdf"
  @ready="handleReady"
></th-preview-pdf>

<!-- 使用 blob 时，建议传入文件名称 -->
<th-preview-pdf blob="blob文件流" name="文件名"></th-preview-pdf>

th-preview-office

<th-preview-office
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.doc"
  @ready="handleReady"
></th-preview-office>

<th-preview-office
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.xls"
  @ready="handleReady"
></th-preview-office>

th-preview-file

<!-- Url 支持任意文件链接，通过链接后缀判断文件类型 -->
<th-preview-file
  url="http://192.168.0.192:9000/lowcode-dev/test-files/文件.png"
  @ready="handleReady"
></th-preview-file>

<!-- 使用 blob 时，建议传入文件名称 -->
<th-preview-file blob="blob文件流" name="文件名"></th-preview-file>