html帮助文档 pdf,HTML PDF Viewer

HTML PDF Viewer

The wijmo.viewer module contains 2 types of viewers: PdfViewer and ReportViewer. The PdfViewer is a lightweight viewer used to display PDFs without any third party PDF reader or software. You can use it to display PDF documents in your web apps.

Includes top document viewer features like thumbnail display, scrolling, paging, and zooming

Print support

Export features

Features

Every feature you’d expect from a document viewer is included out-of-the-box:

Print support

Responsive viewer

Thumbnails

Search

Pagination

Full-screen and resizing options

Continuous scrolling options

Basics

To show the PDF file from C1 Web API PDFDocument Services, set the following basic properties:

serviceUrl: The url of C1 Web API PDFDocument Services. For example, ''.

filePath: The full path to the pdf file. For example, 'PdfRoot/DefaultDocument.pdf'.

The 'PdfRoot' is the key of the pdf file disk storage provider, which is registered at server for locating the specified pdf file.

The 'DefaultDocument.pdf' is the relative path of the pdf file, which can be located by the disk storage provider.

Example

...

...

let pdfViewer = new viewer.PdfViewer('#pdfViewer', {

serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf',

filePath: 'PdfRoot/DefaultDocument.pdf',

zoomFactorChanged: (sender) => {

zoomFactor.value = sender.zoomFactor;

}

});

The C1 Web API PDFDocument Services uses C1PdfDocumentSource to render and export pdf files. Please refer to How to set up C1 Web API PDFDocument Services for details.

Also the PdfViewer control has the following properties, which allow you to customize its appearance and behavior:

fullScreen: Indicates whether the viewer is under full screen mode.

mouseMode: Indicates the mouse behavior.

viewMode: Indicates how to show the document pages.

zoomFactor: Indicates the current zoom factor to show the document pages.

Example

pdfViewer.fullScreen = true;

pdfViewer.mouseMode = wijmo.viewer.MouseMode.MoveTool;

pdfViewer.viewMode = wijmo.viewer.zoomMode.WholePage;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-pdf-viewer是一个基于React的PDF阅读器组件库,由于其开源且易于使用的特点,被广泛应用于Web开发中。 以下是react-pdf-viewer的中文文档: ## 安装 使用npm安装: ``` npm install @react-pdf-viewer/core --save ``` 或者使用yarn安装: ``` yarn add @react-pdf-viewer/core ``` ## 使用 ```javascript import React from 'react'; import { Viewer } from '@react-pdf-viewer/core'; import '@react-pdf-viewer/core/lib/styles/index.css'; const App = () => ( <Viewer fileUrl="https://arxiv.org/pdf/quant-ph/0410100.pdf" /> ); export default App; ``` ## API ### Viewer PDF阅读器组件,提供一系列的props来控制阅读器的行为。 #### 属性 * `fileUrl: string`:必须的属性。PDF文件的URL。 * `defaultScale?: number | string`:PDF文件的默认缩放比例。可以是数字,也可以是字符串,例如“auto”、“page-width”、“page-fit”、“50%”等。默认值为“auto”。 * `initialPage?: number`:PDF文件的初始页数。默认值为1。 * `onDocumentLoad?(pdfDocument: PdfDocument) => void`:当PDF文件加载完成时调用的回调函数。 * `onPageChange?(page: number) => void`:当页码发生改变时调用的回调函数。 * `renderError?(error: Error) => React.ReactElement`:当加载PDF文件出错时的自定义渲染函数。 * `renderLoader?() => React.ReactElement`:当加载PDF文件时的自定义渲染函数。 * `theme?: ThemeContext`:阅读器的主题。默认为`defaultTheme`。 ### defaultLayoutPlugin 默认的布局插件,提供一系列的props来控制布局。 #### 属性 * `defaultScale?: number | string`:PDF文件的默认缩放比例。可以是数字,也可以是字符串,例如“auto”、“page-width”、“page-fit”、“50%”等。默认值为“auto”。 * `sidebarTabs?: Array<SidebarTab>`:侧边栏选项卡列表。默认为`[bookmarksTab, attachmentsTab]`。 * `sidebarWidth?: number`:侧边栏的宽度。默认为`280`。 * `thumbnailContainer?: (props: ThumbnailContainerProps) => React.ReactElement`:自定义缩略图容器组件。 * `topToolbar?: (props: ToolbarProps) => React.ReactElement`:自定义顶部工具栏组件。 * `zoom?(scale: number) => void`:缩放PDF文件的函数。当需要在自定义组件中调用缩放功能时,需要将此函数作为props传递给自定义组件。 ### defaultToolbarPlugin 默认的工具栏插件,提供一系列的props来控制工具栏。 #### 属性 * `numberOfPages?: number`:PDF文件的总页数。当PDF文件加载完成后,将自动更新此属性。 * `page?: number`:PDF文件的当前页码。当页码发生改变时,将自动更新此属性。 * `zoom?(scale: number) => void`:缩放PDF文件的函数。当需要在自定义组件中调用缩放功能时,需要将此函数作为props传递给自定义组件。 ### defaultTheme 默认的主题。 #### 属性 * `background?: string`:阅读器的背景色。默认为`#fff`。 * `color?: string`:阅读器的前景色。默认为`#000`。 * `primaryColor?: string`:阅读器的主色调。默认为`#4caf50`。 * `secondaryColor?: string`:阅读器的次色调。默认为`#2196f3`。 ## 示例 以下是一个包含自定义缩略图容器和工具栏的示例: ```javascript import React, { useState } from 'react'; import { Viewer, defaultLayoutPlugin, defaultToolbarPlugin, ThumbnailList, Toolbar } from '@react-pdf-viewer/core'; import '@react-pdf-viewer/core/lib/styles/index.css'; const App = () => { const [numPages, setNumPages] = useState(0); const [currentPage, setCurrentPage] = useState(0); const handleDocumentLoadSuccess = ({ numPages }) => { setNumPages(numPages); }; const handlePageChange = (page) => { setCurrentPage(page); }; const handleZoom = (scale) => { console.log(`Zoom to ${scale}`); }; const thumbnailContainer = (props) => ( <div style={{ padding: '16px 0' }}> <ThumbnailList {...props} /> </div> ); const topToolbar = (props) => ( <div style={{ padding: '16px 0' }}> <Toolbar {...props} pageIndex={currentPage} numberOfPages={numPages} zoom={handleZoom} /> </div> ); return ( <div style={{ display: 'flex', flexDirection: 'row', height: '100vh' }}> <Viewer fileUrl="https://arxiv.org/pdf/quant-ph/0410100.pdf" plugins={[ defaultLayoutPlugin({ thumbnailContainer, }), defaultToolbarPlugin({ topToolbar, }), ]} onDocumentLoadSuccess={handleDocumentLoadSuccess} onPageChange={handlePageChange} /> </div> ); }; export default App; ``` ## 参考 * [react-pdf-viewer官方文档](https://react-pdf-viewer.dev/)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值