Skip to content

Latest commit

 

History

History
73 lines (57 loc) · 4.86 KB

README_ZH.md

File metadata and controls

73 lines (57 loc) · 4.86 KB
Raw

pdf-vue3

English ｜ 中文

vue3 pdf 查看器

在线演示: https://hymhub.github.io/pdf-vue3/

安装

  npm i pdf-vue3

使用

<script setup>
import PDF from "pdf-vue3";
</script>

<template>
  <PDF src="/demo.pdf" />
  <!-- <PDF :src="BASE64" /> -->
  <!-- <PDF :src="Uint8Array" /> -->
</template>

配置 API

组件参数(Props)

属性 描述 类型
src PDF的URL或二进制数据（Uint8Array）或BASE64编码。 string | Uint8Array | BASE64
showProgress 是否显示下载进度条。默认值是true。 boolean
progressColor 下载进度条的颜色。默认值是#87ceeb。 string
showPageTooltip 是否显示分页提示。默认值是true。 boolean
showBackToTopBtn 是否显示回顶部按钮。默认值是true。 boolean
scrollThreshold 滚动距离超过多少显示返回顶部的按钮。默认值是300。 number
pdfWidth pdf页面宽度。默认值是 100%。 string
rowGap pdf页面之间的行距。默认值是8。 number
page 控制当前所在页码，支持响应式变量动态改变页码。默认值是 1 number
cMapUrl 自定义cMapUrl。默认值是 https://unpkg.com/pdfjs-dist@3.7.107/cmaps/ string
httpHeaders 设置 httpHeaders 信息 object
withCredentials 表示是否应该使用 cookies 或授权头等凭证进行跨站访问控制请求。默认为 false。 boolean
password 用于解密受密码保护的PDF。 string
useSystemFonts 当true时，没有嵌入到PDF文档中的字体将退回到系统字体。默认值在 web 环境中是true，在Node.js中是false 除非 disableFontFace === true，在这种情况下，无论环境如何，都默认为false（以防止字体完全损坏）。 boolean
stopAtErrors 当相关的PDF数据不能被成功解析时，拒绝某些承诺，例如getOperatorList、getTextContent和RenderTask，而不是尝试恢复任何可能的数据。默认值是false。 boolean
disableFontFace 默认情况下，字体被转换为OpenType字体并通过字体加载API或@font-face规则加载。如果禁用，字体将使用内置的字体渲染器进行渲染，该渲染器使用原始路径命令构建字形。在网络环境中的默认值是false，在Node.js中是true。 boolean
disableRange 禁用PDF文件的范围请求加载。启用后，如果服务器支持部分内容请求，那么PDF将被分块取走。默认值是false。 boolean
disableStream 禁用PDF文件的数据流。默认情况下，PDF.js会尝试以块状方式加载PDF文件。默认值是false。 boolean
disableAutoFetch 禁用预取PDF文件的数据。当范围请求被启用时，PDF.js将自动继续获取更多的数据，即使不需要显示当前页面。默认值是false。注意：还必须禁用流媒体disableStream，见上文，以使禁用预取的功能正常工作。 boolean

事件(Events)

Event Name Description Parameters
onProgress 监听 PDF 下载进度，参数为0-100。 loadRatio: number
onComplete 听 PDF 下载完成。 -
onScroll 监听 PDF 的滚动，参数是当前的scrollTop值。 scrollOffset: number
onPageChange 监听页码改变。 page: number
onPdfInit 监听 PDF 初始化。PDFDocumentProxy: https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentProxy.html pdf: PDFDocumentProxy

插槽(Slots)

Slot Name Description Parameters
progress 定制进度条 loadRatio: number
pageTooltip 定制分页提示 currentPage: number, totalPages: number
backToTopBtn 定制回顶部按钮 scrollOffset: number