react pdf预览选择那个插件？

最新推荐文章于 2024-08-28 08:03:08 发布
最新推荐文章于 2024-08-28 08:03:08 发布
阅读量709 收藏 1
点赞数
分类专栏： js 文章标签： react react pdf预览 pdf预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyp_slw/article/details/121462721
版权

推荐的是@mikecousins/react-pdf，一开始选择的是react-pdf，但是react-pdf有一个致命的弱点是当我预览的pdf中文字量很大时，react-pdf会生成大量的span标签，由于大量DOM导致一部分性能不好的设备出现及其卡顿的情况，不是很理解react-pdf的作者为什么要把大量无用的dom渲染出来，本身是用canvas渲染的内容不是吗？ 只是吐槽而已。我也没看具体实现。

lar_slw
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react中预览pdf文件
weixin_43709908的博客
10-30 1115
jsx import React, { Component } from 'react'; import { Document, Page } from 'react-pdf/dist/entry.webpack'; import 'react-pdf/dist/Page/AnnotationLayer.css'; import envconfig from "@/envconfig/envconfig" import './PDFView.less'; import { getSearchQueryS
使用react-pdf-js插件实现pdf在线预览（兼容性良好）
weixin_42215167的博客
09-01 4027
1.下载包 yarn add react-pdf-js 2.使用 import PDF from 'react-pdf-js'; const [page, setPage] = useState(1); //pdf当前页数 const [pageTotal, setPageTotal] = useState(0); //pdf总页数 const onDocumentComplete = (pages) => { setPage(1); setPageTotal(pages);
react-ReactPDF帮你在React应用中展示PDF文件
08-14
React-PDF 帮你在 React 应用中展示 PDF 文件
react+react-pdf-js 前端pdf在线预览插件
qq_21651453的博客
03-24 3034
"react": "^16.13.1" "react-read-pdf": "^2.0.9" 这两个对应版本实测无问题，其他版本有的实测有问题（hook问题） 1、 npm install react-pdf-js import history from '../../router/history' const PDFUrl=require('../../static/file/t...
使用 `react-pdf-js` 在 React 中渲染 PDF 文档
gitblog_00151的博客
08-08 825
使用 react-pdf-js 在 React 中渲染 PDF 文档 react-pdf-jsA React component to wrap PDF.js项目地址:https://gitcode.com/gh_mirrors/re/react-pdf-js 1. 项目介绍 react-pdf-js 是一个React组件，它提供了一个方便的包装器来使用PDF.js库进行PDF文档的渲染。该项目...
react-这是一个用于做图片预览或者图片查看得react插件
08-15
这是一个用于做图片预览或者图片查看得react插件
react-pdf:基于pdf.js的简单而精美的PDF Viewer:page_facing_up::high_voltage:
04-28
ReactPDF React PDF是一个基于pdf.js的简单，精美​​的PDF查看器 进度条 缩略图侧栏 工具箱（放大，缩小，页面跳转，上一页，下一页） 在页面内搜索 如何安装 npm install @intelllex/react-pdf 或者 yarn add @intelllex/react-pdf 如何使用 import React from 'react' ; import ReactPDF from '@intelllex/react-pdf' ; const ExampleReactPDF = ( ) => { return ( < ReactPDF xss=removed>" showProgressBar showToolbox / >
推荐文章：React-PDF - 在React应用中轻松展示PDF文件的神器
最新发布
gitblog_00082的博客
08-28 424
推荐文章：React-PDF - 在React应用中轻松展示PDF文件的神器 react-pdfReact component for showing pdf documents项目地址:https://gitcode.com/gh_mirrors/reac/react-pdf 项目介绍 在数字时代，PDF文档几乎是无处不在的。对于前端开发者来说，如何在React应用中完美地嵌入PDF文件，曾...
React项目pdf,word 预览 使用react-file-viewer插件
赵乘风_i
04-12 4546
最近需要做一个word和pdf预览的功能，因为基础的技术栈是 react，于是就选用了 react-file-viewer 这个插件. 其实这个插件，还支持更多文件格式 Images: png, jpeg, gif, bmp, including 360-degree images pdf csv xslx docx Video: mp4, webm Audio: mp3 安装 npm i react-file-viewer ps: 如果React版本小于16，需要安装 0.5版本的 react-fil
React文件预览,React实现在线预览docx，xslx，pdf格式文件
热门推荐
酸酸的博客
07-30 1万+
一、前言 由于项目需要实现文件的预览功能，通过查询百度找到了一个组件，就是react-file-viewer，其官方API中描述可支持文件格式有以下格式： 图片：png，jpeg，gif，bmp，包括360度图片 pdf格式 CSV xslx docx 视频：mp4，webm 音频：mp3 但是经过我的测试发现它可以打开docx，xslx格式的文件，pdf格式的文件有时能打开有时打不开的（我刚开始测试的时候pdf格式的文件就一直打不开，但是当项目写完测试的时候发现又能打开pdf格式的文件了）。所以当时开发的
使用react-pdf实现pdf预览功能
weixin_38285351的博客
05-14 9320
使用react-pdf实现pdf预览功能 执行下面的命令安装react-pdf npm install react-pdf 或 yarn add react-pdf. 安装成功后就可以引用了 import { Document, Page } from 'react-pdf'; //totalPages 是pdf文件的总页数 onLoadSuccess= ({ totalPages }) => { this.setState({ totalPages }); }; <div
react-pdf-js：一个包装PDF.js的React组件
02-04
react-pdf-js react-pdf-js提供了使用呈现PDF文档的组件。 演示版 用法 使用yarn add @mikecousins/react-pdf安装yarn add @mikecousins/react-pdf或npm install @mikecousins/react-pdf usePdf挂钩 使用应用程序中的钩子（还显示一些基本的分页）： import React , { useState , useRef } from 'react' ; import { usePdf } from '@mikecousins/react-pdf' ; const MyPdfV
查看 PDF 文档的 React 组件
06-08
// 插件 import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; // 导入样式 import '@react-pdf-viewer/core/lib/styles/index.css'; 导入'@react-pdf-viewer/default-layout/lib/styles/index...
React-PDF 开源项目指南
gitblog_00254的博客
08-24 629
React-PDF 开源项目指南 react-pdfReact component for showing pdf documents项目地址:https://gitcode.com/gh_mirrors/reac/react-pdf 一、项目目录结构及介绍 React-PDF 是一个基于 React 的库，用于在 Web 应用中渲染 PDF 文件。下面是对项目主要目录的概览及其功能介绍： r...
【避坑指“难”】全网最全面的-基于React实现PDF预览功能（react-pdf-js VS react-pdf）
椰卤工程师的个人博客
12-20 5598
由于业务需求，PM让我实现H5直接预览PDF，好家伙，我以为真的就像他说的一样，殊不知，横竖都是二，到处都是坑，真的是“井田”啊！ 常见的PDF预览功能主要三个方向来实现： 读PDF文件，进行预览展示（通常是XXX.pdf文件） 读PDF文件链接，进行预览展示（https://192.168.0.1/mock/downloadPdf?params=xxx） 读Base64编码后的PDF，进行预览展示（比较少见，除非业务场景需要） react-pdf 直达地址：https://www.npmjs.com/
推荐开源项目：react-pdf-js —— 轻松在React中渲染PDF文档
gitblog_00040的博客
05-18 833
推荐开源项目：react-pdf-js —— 轻松在React中渲染PDF文档 react-pdf-jsA React component to wrap PDF.js项目地址:https://gitcode.com/gh_mirrors/re/react-pdf-js 项目介绍 react-pdf-js 是一个基于 PDF.js 的React组件库，它为你提供了便捷的方式，在你的React应用...
使用 react-pdf 制作pdf or 简历生成的使用及遇见的中文乱码问题
HCL_world的博客
12-23 1623
使用 react-pdf 制作pdf or 简历生成的使用及遇见的中文乱码问题
react项目实现文件预览，比如PDF、txt、word、Excel、ppt等常见文件（腾讯云cos）
YanHSama的博客
10-24 4084
使用腾讯云文档预览，需要开通文档预览功能，该功能需要收费的。如果需要图片预览、视频或音频可以使用获取下载链接。使用cos获取预览文档链接。
react pdf预览
08-21
React PDF预览是使用React框架来嵌入和显示PDF文件的一种功能。在Web开发中，可以通过多种方式实现PDF文件的预览，其中一些流行的库和方法包括： 1. 使用`<iframe>`标签：可以通过嵌入一个`<iframe>`元素，将PDF...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lar_slw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值