@fiscozen/pdf-查看器
Vue 3 组件,用于渲染带有缩放,页面导航,以及可选 PDF/XML 视图模式切换等功能的PDF文件.
安装
npm install @fiscozen/pdf-viewer
使用量
<script setup>
import { FzPdfViewer } from '@fiscozen/pdf-viewer'
</script>
<template>
<FzPdfViewer src="https://example.com/document.pdf" width="100%" />
</template>
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
src | string | —— 说 | 要求. PDF 文件的 URL. |
xmlSrc | string | —— 说 | XML 文件的 URL. 提供时 toolbarVariant="advanced",允许 PDF/XML 视图模式切换。 在XML模式下,以iframe提供XML,并隐藏缩放/页面控制. |
environment | "frontoffice" | "backoffice" | "frontoffice" | 大小环境变体. |
height | string | "768px" | 取景器容器高度. |
width | string | "512px" | 取景器容器的宽度. |
toolbarVariant | "basic" | "advanced" | "basic" | "basic" 显示缩放和页面导航. "advanced" 添加下载按钮, 当 xmlSrc 提供了 PDF/XML 视图模式切换. |
toolbarPosition | "top" | "bottom" | "bottom" | 工具栏相对于 PDF 的位置 。 何时 "top",工具栏只在悬浮时显示. |
initialPage | number | 1 | 开始页面. |
initialScale | number | 1 | 开始缩放级别(1=100%). |
minScale | number | 0.25 | 最小缩放级别 . |
maxScale | number | 2 | 最大缩放级别 . |
scaleStep | number | 0.25 | 每步放大增量. |
selectable | boolean | false | 何时 true,使文本层允许用户选择并复制文本. |
rotatable | boolean | false | 何时 true,在高级工具栏中显示旋转按钮。 仅适用于下列情况: toolbarVariant="advanced"。 。 。 . |
containerClass | string | —— 说 | 外容器自定义 CSS 类 . |
pdfContainerClass | string | —— 说 | PDF/内容容器自定义 CSS 类 . |
v 型号
| 型号 | 类型 | 默认 | 说明 |
|---|---|---|---|
viewMode | "pdf" | "xml" | "pdf" | 当前视图模式 。 只有活动时 toolbarVariant="advanced" 财务报告和审定财务报表 xmlSrc 提供. |
活动
| 活动 | 有效载荷 | 说明 |
|---|---|---|
download | —— 说 | 点击下载按钮时发送 。 家长负责处理实际下载(例如根据当前下载PDF或XML) viewMode) (中文(简体) ). |
实例
基本工具栏
<FzPdfViewer
src="https://example.com/document.pdf"
width="100%"
/>
带有下载的高级工具栏
<FzPdfViewer
src="https://example.com/document.pdf"
toolbarVariant="advanced"
width="100%"
@download="handleDownload"
/>
PDF/ XML 切换
何时 xmlSrc 将同时提供 toolbarVariant="advanced",组件显示一个可切换 PDF 视图和 XML 视图的标签切换器。 在 XML 模式下, XML 在 iframe 中渲染出; 缩放和页控件在下载按钮仍然可见时被隐藏.
<script setup>
import { ref } from 'vue'
import { FzPdfViewer } from '@fiscozen/pdf-viewer'
const viewMode = ref('pdf')
function handleDownload() {
const url = viewMode.value === 'pdf' ? pdfUrl : xmlUrl
// trigger download...
}
</script>
<template>
<FzPdfViewer
src="https://example.com/document.pdf"
xmlSrc="https://example.com/document.xml"
toolbarVariant="advanced"
v-model:viewMode="viewMode"
width="100%"
@download="handleDownload"
/>
</template>
说明: 这个
download事件不会自动下载任何东西。 使用viewMode以确定是下载PDF还是XML.