antd 实现pdf 预览_reactpdf 实现 pdf 在线预览（翻页、放大缩小等）

最新推荐文章于 2024-05-11 09:32:26 发布
最新推荐文章于 2024-05-11 09:32:26 发布
阅读量2.2k 收藏 5
点赞数
文章标签： antd 实现pdf 预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39951112/article/details/112177693
版权

react实现pdf文档可翻页查看，可放大缩小及全屏等功能，选的是 react-pdf 插件， react-file-viewer 插件也试了下，可以查看pdf，不过是一次性加载全部，最终选了前者

插件引用

Ant Design Pro + react-pdf插件

插件地址:

https://www.npmjs.com/package/react-pdf

1、安装插件
$ npm install react-pdf 
# or
$ yarn add react-pdf
2、组件引用
import { Document, Page } from "react-pdf";
3、简单使用
  file="somefile.pdf"
  onLoadSuccess={onDocumentLoadSuccess}
>
  

Page {pageNumber} of {numPages}

运行后报错：

ba73a3849e6793f3e39ccba3904f34a4.png

解决&#

最低0.47元/天 解锁文章
weixin_39951112
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd 实现pdf 预览_react项目中实现在线PDF文件展示
weixin_35890888的博客
12-29 1257
说明最近在做一个项目，需求是要在移动客户端：安卓和ios上在线展现pdf文件，并支持上下分页。经过多方多次探索实现的都不是很理想，要想在react项目(react+redux+router+webpack)中实现pdf加载并显示就这么费劲么？最后的最后抱着试试看的心理在npm官方搜到了一款叫react-pdf的插件，Use by adding . file can be an URL, base6...
antd 实现pdf 预览_react显示pdf文件 一屏幕显示所有页
weixin_31633071的博客
12-29 973
背景接到一个需求，需要页面同时展示多个PDF文件并且需要可以同时滚动。一开始想到用iframe渲染PDf，但是考虑到用iframe渲染PDF文件不好控制，然后开始在网上找到两个渲染PDF的库对比两个库后发现react-pdf用户量更大，文档更为清晰，功能也比较全面，所以选用了react-pdf。安装注意：使用之前要根据自己项目的react版本去下载对应的react-pdf版本，通过npm默认安装最...
推荐文章：拥抱React的PDF渲染利器 —— `react-pdf`
最新发布
gitblog_00087的博客
05-11 314
推荐文章：拥抱React的PDF渲染利器 —— react-pdf 项目地址:https://gitcode.com/wojtekmaj/react-pdf 1. 项目介绍 在Web开发的世界里，处理PDF文件是一项常见的挑战。react-pdf是一个强大的开源库，它使开发者能够在React应用中优雅地展示PDF文档。借助这个库，你可以轻松地将PDF内容整合到你的应用程序中，为用户提供无缝的阅读体...
antd 实现pdf 预览_React下实现pdf在线预览
weixin_39969568的博客
12-19 1673
问题背景因为项目需要，在react项目中需要实现pdf文件的预览。环境配置node： v10.18.1react: v16.8.xyarn: v1.21.1技术调研截止2020年2月，市面上的主流在线可视化底层库为viewjs和pdf.js。两者定位不同，前者覆盖pdf，office等多种文档格式，部署复杂；后者由mozilla项目组创建和管理，相对轻巧。而google搜索react...
UAV-VOC2007格式数据做成imdb格式
zxmyoung的博客
09-08 609
这两天需要使用caffe框架跑实验，每次都需要把VOC格式转换成IMDB格式。今天就把转换格式的过程单独列成一个博客。 前提：配置caffe环境 1. export PYTHONPATH=/home/zhai/experiment/caffe-ssd-master/caffe/python:$PYTHONPATH 2. cd cafffe/ 3. make all -j8 4. make pycaffe 首选在caffe/data中新建一个MyUAVDT文件夹，将数据集(VOC2007.
antd 实现pdf 预览_使用react-pdf-js插件实现pdf文件预览（canvas）及打印，指定区域打印时出现空白怎么弄？...
weixin_36399948的博客
01-26 788
问题描述已经能够预览出来了，但是打印的时候出了一些问题。相关代码import React, { Component } from 'react';import {Button, Modal, Pagination} from 'antd'import PDF from 'react-pdf-js';import test from '../../assets/files/test.pdf';exp...
java pdf如何实现分页返回pdf_如何实现高性能的在线 PDF 预览
weixin_39539764的博客
11-27 963
作者：子木 政采云前端团队转发链接：https://mp.weixin.qq.com/s/Wx_gJLrZftJ_dm2phoUf8g引言最近接到产品需求，用户需要在我们可站点上在线查看 PDF 文件，并且查看时，用户可以对 PDF 文件的进行旋转、缩放、跳转到指定页码等操作。这个太简单了，随便找找就一堆轮子。目前常见的在线 PDF 查看方案：使用 iframe、embed、object 标签直接...
ant-desgin 打开pdf增加认证参数据
tonysh_zds的博客
07-13 105
ant-desgin 打开pdf增加认证参数据
vue3.0pdf在线预览
02-25
vue3.0pdf在线预览
vue实现裁切图片同时实现放大、缩小、旋转功能
08-27
vue实现裁切图片同时实现放大、缩小、旋转功能 本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下： 知识点1：裁切图片 在vue中实现裁切图片可以使用canvas元素，通过读取...
Ant 详细教程，包含pdf和doc文件
10-20
从网上下载的，非常好的ANT学习资料，包括ant安装部署，ant编写，ant整合，ant高级应用等。
vue实现图片预览组件封装与使用
12-29
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。 子组件 <!--html部分--> <mt-swipe :auto=0 :show-indicators=false :...
antd-theme-online:在线生预览、生成、下载 Antd主题
05-02
antd-theme-online在线主题生成工具 在线生预览、生成、下载 antd主题 install npm run install development npm run start build npm run build result 默认主题： 选择基色，预览主题 下载主题包
react实现antd线上主题动态切换功能
10-16
主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
关于react打开新窗口展示本地pdf问题
weixin_46176823的博客
02-23 1965
一开始，我以为react和普通的html相同，可以通过a标签在href中引入文件的绝对路径就可以，后来发现调试窗口显示不被允许操作本地资源。 在网上找了好多相关的教程以及讨论，并且尝试之后，发现一种可行的方案。那就是引入react-pdf-js这个组件库。 代码如下： import PDF from 'react-pdf-js' const PDFTest = require('F:/test/ecr/20201118/testoone2.pdf'); @Form.create() class Pdf
前端在线预览之pdf、word、excel预览
weixin_48727473的博客
09-15 1067
公司最近有这么个需求，在线预览pdf、excel、word功能，正好有点时间，稍微整理记录一下。
在HTML或React中实现PDF文件预览，想要不允许下载等如何设置呢？
hongweilin2021的博客
10-30 6587
在HTML或React中实现PDF文件预览且要隐藏下载等按钮，得使用pdf.js框架方案，诸如iframe等HTML标签方式都不行。
antdesignvue 多文件或单文件上传pdf和图片，加预览下载删除，限制文件大小
qq_38687592的博客
12-29 3994
antdesignvue 多文件或单文件上传,限制pdf和图片，加预览下载删除，限制文件大小
使用vue + antd实现前端预览jpg、pdf、ceb格式的文件
07-15
您可以使用 `vue` 框架配合 `antd` 组件库来实现前端预览 `jpg`、`pdf`、`ceb` 格式的文件。下面是一种可能的实现方式： 1. 安装必要的依赖： ```bash npm install vue-pdf ant-design-vue ``` 2. 在您的 Vue 组件中引入所需的组件： ```javascript import { Button, Modal } from 'ant-design-vue'; import PdfViewer from 'vue-pdf'; export default { components: { Button, Modal, PdfViewer }, data() { return { previewVisible: false, previewFile: null, fileFormat: '' }; }, methods: { handlePreview(file) { this.previewFile = file; this.previewVisible = true; }, handleClosePreview() { this.previewVisible = false; this.previewFile = null; } }, render() { return ( <div> {/* 按钮组件 */} <Button type="primary" onClick={() => this.handlePreview('file.jpg')}> 预览 JPG </Button> <Button type="primary" onClick={() => this.handlePreview('file.pdf')}> 预览 PDF </Button> <Button type="primary" onClick={() => this.handlePreview('file.ceb')}> 预览 CEB </Button> {/* 文件预览模态框 */} <Modal title="文件预览" visible={this.previewVisible} onCancel={this.handleClosePreview} footer={null} > {this.previewFile && ( <div> {this.previewFile.endsWith('.pdf') && ( <PdfViewer src={this.previewFile} /> )} {/* 其他文件格式的预览组件，根据实际需求自行选择 */} {/* 示例：<ImageViewer src={this.previewFile} /> */} </div> )} </Modal> </div> ); } }; ``` 3. 在示例代码中，我们通过 `Button` 组件触发 `handlePreview` 方法来打开文件预览模态框。预览模态框使用 `Modal` 组件展示，并根据文件格式选择相应的预览组件（示例中使用了 `vue-pdf` 组件来预览 PDF 文件）。 请注意，上述示例中的 `PdfViewer` 组件仅支持预览 PDF 文件，对于其他文件格式（如 `jpg`、`ceb`），您需要自行选择相应的预览组件或者编写自定义组件来进行预览。 另外，您可能需要根据实际情况进行样式调整和其他逻辑处理。希望以上代码对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值