Llh-pdf NPM | npm.io

以下是PDF组件的使用文档：

ThsPDF 组件文档

简介

ThsPDF 是一个基于 PDF.js 的 Vue3 PDF 查看器组件，提供PDF文件的查看、页面跳转、搜索等功能。

安装

npm install ths-pdf

基础用法

<template>
  <ths-pdf :pdfUrl="pdfUrl" @getSaveResult="handleSaveResult"/>
</template>

<script setup>
import { ref } from 'vue'

const pdfUrl = ref('http://example.com/sample.pdf')

const handleSaveResult = (result) => {
  console.log('保存结果:', result)
}
</script>

属性（Props）

属性名	类型	默认值	说明
pdfUrl	String	-	PDF文件的URL地址

事件（Events）

事件名	参数	说明
getSaveResult	resultObj	保存操作的回调函数，返回保存结果对象

方法（Methods）

组件通过 ref 暴露以下方法：

方法名	参数	说明
getSaveResult	-	触发文件保存操作
actionChangePage	pageNumber	跳转到指定页码
actionSearch	query	搜索指定内容
actionChangeLocale	langCode	切换界面语言

示例代码

页面跳转

<template>
  <ths-pdf ref="pdfRef" :pdfUrl="pdfUrl"/>
  <button @click="jumpToPage(2)">跳转到第2页</button>
</template>

<script setup>
import { ref } from 'vue'

const pdfRef = ref(null)
const pdfUrl = ref('http://example.com/sample.pdf')

const jumpToPage = (pageNum) => {
  pdfRef.value.actionChangePage(pageNum)
}
</script>

搜索内容

<template>
  <ths-pdf ref="pdfRef" :pdfUrl="pdfUrl"/>
  <input v-model="searchText" @keyup.enter="searchContent"/>
</template>

<script setup>
import { ref } from 'vue'

const pdfRef = ref(null)
const searchText = ref('')
const pdfUrl = ref('http://example.com/sample.pdf')

const searchContent = () => {
  pdfRef.value.actionSearch(searchText.value)
}
</script>