- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
建议安装8.0.2版本的react-pdf,如果安装更高版本的可能出现一些浏览器的兼容性问题; 。
npm install react-pdf@8.0.2 -S
。
import React, { useState } from 'react' import { Modal, Spin, Alert } from 'antd' import { Document, Page, pdfjs } from 'react-pdf' import 'react-pdf/dist/esm/Page/AnnotationLayer.css' import 'react-pdf/dist/esm/Page/TextLayer.css'; // 配置 PDF.js 的 worker 文件 pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString() interface PDFPreviewModalProps { fileName: string | null fileUrl: string | null // 传入的 PDF 文件地址 onCancel: () => void // 关闭弹框的回调 } const PDFPreviewModal: React.FC<PDFPreviewModalProps> = ({ fileName, fileUrl, onCancel }) => { const [numPages, setNumPages] = useState<number | null>(null) const [pdfWidth, setPdfWidth] = useState<number>(600) // 默认宽度为 600px const [loading, setLoading] = useState<boolean>(true) // 控制加载状态 const [error, setError] = useState<boolean>(false) // 控制加载错误状态 // 当 PDF 加载成功时,设置页面数量 const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setNumPages(numPages) setLoading(false) // 加载成功后,隐藏 loading } // 加载失败时,设置错误状态 const onDocumentLoadError = () => { setLoading(false) setError(true) // 出错时显示错误提示 } // 获取 PDF 页面加载后的宽度 const onPageLoadSuccess = ({ width }: { width: number }) => { setPdfWidth(width) } return ( <Modal title={`【${fileName}】预览`} open onCancel={onCancel} footer={null} width={pdfWidth + 100} style={{ top: 20 }} > {error ? ( <Alert message="加载 PDF 文件失败" type="error" showIcon /> ) : ( <> {loading && ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '80vh' }}> <Spin size="large" /> </div> )} {fileUrl && ( <> <div style={{ height: '88vh', overflowY: 'auto', padding: '24px' }}> <Document //file={new URL('/public/temp/DXF文件要求.pdf',import.meta.url).toString()} file={fileUrl} onLoadSuccess={onDocumentLoadSuccess} onLoadError={onDocumentLoadError} > {Array.from(new Array(numPages), (el, index) => ( <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} /> ))} </Document> </div> </> )} </> )} </Modal> ) } export default PDFPreviewModal
import React, { useState, useEffect, useCallback } from 'react' import { Form } from 'antd' import { List } from 'antd' import PDFPreviewModal from '@/components/PdfViewModal.tsx' const PdfTest = (props: any) => { const [previewFile, setPreviewFile] = useState<any>()
const onTestPdf = () => {
setPreviewFile({
fileName: 'abc.pdf',
fileUrl: 'http://****/abc.pdf'
})
}return ( <div className="mrUp mrLink">
<div onClick={onTestPdf}>测试预览PDF</div>
{!!previewFile?.publicFileUrl && ( <PDFPreviewModal fileName={previewFile?.fileName} fileUrl={previewFile?.publicFileUrl} onCancel={() => setPreviewFile('')} /> )} </div> ) } export default PdfTest
移动端加入放大、缩小、上一页、下一页的功能; 。
import React, { useState } from 'react'; import { Button, Modal, Space, Toast, Divider } from 'antd-mobile' import { UpOutline, DownOutline, AddCircleOutline, MinusCircleOutline } from 'antd-mobile-icons' import { Document, Page, pdfjs } from 'react-pdf'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; // 样式导入 import 'react-pdf/dist/esm/Page/TextLayer.css' // 配置 PDF.js 的 worker 文件 pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString() interface PDFPreviewModalProps { fileUrl: string | null; // 传入的 PDF 文件地址 } const styleBtnDv = { display: 'flex', justifyContent: 'center', height: '1rem', alignItems: 'center', gap: '0.4rem', margin: '0.3rem 1rem', padding: '0 0.6rem', background: '#444', borderRadius: '0.5rem' } const styleBtn = { flex: 1, display: 'flex', justifyContent: 'center', height: '0.6rem', alignItems: 'center', } // PDF预览功能 const PDFViwer: React.FC<PDFPreviewModalProps> = ({ fileUrl }) => { const [pageNumber, setPageNumber] = useState(1); const [numPages, setNumPages] = useState(1); const [scale, setScale] = useState(0.65); // 当 PDF 加载成功时,设置页面数量 const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setNumPages(numPages); }; //上一页 function lastPage() { if (pageNumber == 1) { Toast.show({ content: '已是第一页' }) return; } const page = pageNumber - 1; setPageNumber(page); } //下一页 function nextPage() { if (pageNumber == numPages) { Toast.show("已是最后一页"); return; } const page = pageNumber + 1; setPageNumber(page); } //缩小 function pageZoomOut() { if (scale <= 0.3) { Toast.show("已缩放至最小"); return; } const newScale = scale - 0.1; setScale(newScale); } //放大 function pageZoomIn() { if (scale >= 5) { Toast.show("已放大至最大"); return; } const newScale = scale + 0.1; setScale(newScale); } return ( <div> {/* 预览 PDF 文件 */} {fileUrl ? ( <div style={{ height: 'calc(100vh - 4.5rem)', overflowY: 'auto', padding: '24px' }}> <Document // 写死的pdf文件地址,用于本地测试使用,打包提交前需要注释掉 // file={new URL("/public/temp/AI销售助手-宽带&套餐&战新.pdf", import.meta.url).toString()} // 真实传入的pdf地址 file={fileUrl} onLoadSuccess={onDocumentLoadSuccess} > <Page pageNumber={pageNumber} scale={scale} /> </Document> </div> ) : ( <p>没有选择文件</p> )} <div style={styleBtnDv}> <div style={styleBtn} onClick={lastPage}><UpOutline color='#fff' fontSize={'0.6rem'} /></div> <div style={{ color: '#fff', fontSize: '0.35rem', ...styleBtn }}>{pageNumber}/{numPages}</div> <div style={styleBtn} onClick={nextPage}><DownOutline color='#fff' fontSize={'0.6rem'} /></div> <div style={styleBtn} onClick={pageZoomIn}><AddCircleOutline color='#fff' fontSize={'0.6rem'} /></div> <div style={styleBtn} onClick={pageZoomOut}><MinusCircleOutline color='#fff' fontSize={'0.6rem'} /></div> </div> </div> ); }; export default PDFViwer;
import React, { useMemo, useRef, useState } from 'react' import { ErrorBlock, Swiper, SwiperRef, Popup, } from 'antd-mobile' import PDFViwer from '@/components/PDFViwer'; const ellipsis1 = { "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis", } const IntroduceDocList = (props: any) => { const { loading, introduceDocList } = props // const introduceDocList = [ // {publicFileUrl: '/public/temp/DXF文件要求.pdf', fileName:'DXF文件要求.pdf'}, // {publicFileUrl: '/public/temp/AI销售助手-宽带&套餐&战新.pdf', fileName:'AI销售助手-宽带&套餐&战新.pdf'}, // ]
const [introduceDocList, setIntroduceDocList] = useState({
{publicFileUrl: 'http://****/abc.pdf', fileName:'abc.pdf'},
{publicFileUrl: 'http://****/def.pdf', fileName:'def.pdf'},
});
const [pdf, setPdf] = useState({ id: 1 }); const [showPdfViwer, setShowPdfViwer] = useState(false) const onOpenPdfViewer = (item) => { console.log(item); setPdf(item); setShowPdfViwer(true); } return ( <div> { introduceDocList?.map(item => ( <div data-url={item?.publicFileUrl} style={{ marginBottom: '0.3rem', fontSize: '0.4rem' }}> <span style={{color:'#0B75FF'}} onClick={() => onOpenPdfViewer(item)}>{item.fileName}</span> </div> )) } <Popup position='right' visible={showPdfViwer} showCloseButton bodyStyle={{ width: '100%' }} destroyOnClose={true} onClose={() => { setShowPdfViwer(false) setPdf({ id: 1 }) }} > <div style={{ padding: '0.3rem 1rem', fontSize: '0.35rem', fontWeight: 600, textAlign:'center', ...ellipsis1 }}>{pdf?.fileName}</div> <div style={{ height: '100%' }} data-url={pdf?.publicFileUrl}> <PDFViwer fileUrl={pdf?.publicFileUrl} /> </div> </Popup> </div> ) } export default IntroduceDocList
。
注意:挡在本地开发时,如果预览的pdf文件地址是线上地址,则会报跨域的问题,需要服务端解决跨域问题.
。
最后此篇关于react-pdf预览在线PDF的使用的文章就讲到这里了,如果你想了解更多关于react-pdf预览在线PDF的使用的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
问题是,当用户回复彼此的帖子时,我必须这样做: margin-left:40px; 对于 1 级深度 react margin-left:80px; 对于 2 层深等 但是我想让 react div
我试图弄清楚如何将 React Router 与 React VR 连接起来。 首先,我应该使用 react-router dom/native ?目前尚不清楚,因为 React VR 构建在 Rea
我是 React 或一般编码背景的新手。我不确定这些陈述之间有什么区别 import * as react from 'react' 和 import react from 'react' 提前致谢!
我正在使用最新的稳定版本的 react、react-native、react-test-renderer、react-dom。 然而,react-native 依赖于 react@16.0.0-alp
是否 react 原生 应用程序开发可以通过软件架构实现,例如 MVC、MVP、MVVM ? 谢谢你。 最佳答案 是的。 React Native 只是你提到的那些软件设计模式中的“V”。如果你考虑其
您好我正在尝试在我的导航器右按钮中绑定(bind)一个功能, 但它给出了错误。 这是我的代码: import React, { Component } from 'react'; import Ico
我使用react native创建了一个应用程序,我正在尝试生成apk。在http://facebook.github.io/react-native/docs/signed-apk-android.
1 [我尝试将分页的 z-index 更改为 0,但没有成功] 这是我的codesandbox的链接:请检查最后一个选择下拉列表,它位于分页后面。 https://codesandbox.io/s/j
我注意到 React 可以这样导入: import * as React from 'react'; ...或者像这样: import React from 'react'; 第一个导入 react
我是 react-native 的新手。我正在使用 React Native Paper 为所有屏幕提供主题。我也在使用 react 导航堆栈导航器和抽屉导航器。首先,对于导航,论文主题在导航组件中不
我有一个使用 Ignite CLI 创建的 React Native 应用程序.我正在尝试将 TabNavigator 与 React Navigation 结合使用,但我似乎无法弄清楚如何将数据从一
我正在尝试在我的 React 应用程序中进行快照测试。我已经在使用 react-testing-library 进行一般的单元测试。然而,对于快照测试,我在网上看到了不同的方法,要么使用 react-
我正在使用 react-native 构建跨平台 native 应用程序,并使用 react-navigation 在屏幕之间导航和使用 redux 管理导航状态。当我嵌套导航器时会出现问题。 例如,
由于分页和 React Native Navigation,我面临着一种复杂的问题。 单击具有类别列表的抽屉,它们都将转到屏幕 问题陈述: 当我随机点击类别时,一切正常。但是,在分页过程中遇到问题。假
这是我的抽屉导航: const DashboardStack = StackNavigator({ Dashboard: { screen: Dashboard
尝试构建 react-native android 应用程序但出现以下错误 info Running jetifier to migrate libraries to AndroidX. You ca
我目前正在一个应用程序中实现 React Router v.4,我也在其中使用 Webpack 进行捆绑。在我的 webpack 配置中,我将 React、ReactDOM 和 React-route
我正在使用 React.children 渲染一些带有 react router 的子路由(对于某个主路由下的所有子路由。 这对我来说一直很好,但是我之前正在解构传递给 children 的 Prop
当我运行 React 应用程序时,它显示 export 'React'(导入为 'React')在 'react' 中找不到。所有页面错误 see image here . 最佳答案 根据图像中的错误
当我使用这个例子在我的应用程序上实现 Image-slider 时,我遇到了这个错误。 import React,{Component} from 'react' import {View,T
我是一名优秀的程序员,十分优秀!