React-pdf：pdf预览插件实践

需求：需要将后端返回的文件地址读出来，然后在页面上预览

1.分析

开始需求的时候我使用的是iframe标签去实现的，如下代码，因为返回来的是一个文件对象，需要使用Blob实例化，上面是官网的blob资料，这里v是一个Blob数据，然后使用createObjectUrl将blob转为服务器上的url地址，然后展示即可

const res: any = await fetch(`${selected_content?.doc_type}`);res.blob().then((v: any) => {let blob = new Blob([v], { type: 'application/pdf' })const url = URL.createObjectURL(blob);anchorJsx = <div style={{height: '100%'}} className='markdown-body'><iframe src={url} title="pdf" style={{height: '100vh', width:'100%'}} /></div>
})

2.Bug

1中的方式，因为页面是需要跨端的，在移动端上pdf无法显示，且无法样式自适应，我们就另找它法，使用频率很高的react-pdf是最合适的（react-pdf - npm）API也很友好，下面我们进入实践。

3.实践

1）首先一定是安装插件

npm install --save react-pdf，如果你是用了s不要忘记安装相应的ts版本，这个vscode都会有提示；

2）安装成功后我们引入，官方有详细的样例：

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';function MyApp() {const [numPages, setNumPages] = useState(null);const [pageNumber, setPageNumber] = useState(1);function onDocumentLoadSuccess({ numPages }) {setNumPages(numPages);}return (<div><Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}><Page pageNumber={pageNumber} /></Document><p>Page {pageNumber} of {numPages}</p></div>);
}

踩坑：还是很简单的，但是这里面进来就会才一个坑，报错如下：

npm上继续看文档，会有详细的解释：

大概意思就是你项目下无法访问这个文件，解决方案，我们更换了CDN，如下（pdf对象来自react-pdf）：

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cat.net/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

3）下来完善我们的代码

如果按照样例那样写，<Page/>组件只循环了一遍，pageNumber也没有变一直是默认的1，但是我们获取到了所有页数numPages，然后如果想一下预览所有的pdf页，我们只要去循环1~numPages就好，for循环比较笨，我们这样写：

<Document file={selected_content?.doc_type} onLoadSuccess={onDocumentLoadSuccess}>{new Array(numPages).fill('').map((_item, index) => {return <Page scale={2} key={index} pageNumber={index + 1} />})}</Document>

new Array创建了一个有numPages项元素的数组，然后我们给每一个元素赋值使用fill方法，这样这个数组就有个55项，那么我们只要使用下标就好了

注：组件还有许多属性，例如我用到的scale就是放大的倍数，可以试页面不失真，如果单纯放大宽度会模糊，因为本身他原是大小就是720*405，比较小。

4）现在我们就完成了，效果如下，也会根据

宽度自适应，移动端也可以适配。

最后，我们可以在完善下，比如每次加载五页，点击加载更多，会在出现5页，这个前端截取数据就可以实现，这个就不具体实现了，that's all

React-pdf：pdf预览插件实践相关推荐

html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
PDF在线预览插件touchPDF.js：手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
js 直接打开选择文件窗口_基于HTML5 构建的 Web端现代化PDF在线预览插件——PDF.js...
引言 PDF文件现在在许多企业中常用 - 无论您是要生成销售报告,交付合同还是发送发票,PDF都是首选的文件类型.PDF.js是由Mozilla编写的JavaScript库.由于它使用vanilla ...
PDF在线预览插件汇总与方案总结
先介绍下工作背景: java一枚,最近在做政府单位的信息管理软件,后台需要对数据进行汇总,并生成PDF格式的报告文件,生成PDF文件用的是iReport生成的,具体可以去百度.生成完之后客户得查看吧, ...
vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能？
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...
vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等
PDF预览插件 1.安装插件(vue-pdf) 2.引用注册pdf组件 3.pdf 常用属性与方法调用 4.常见报错 1.安装插件(vue-pdf) npm i pdfjs-dist@2.5.207 ...
前端实现pdf在线预览
概述:pdf在线预览,包括PC端浏览器.IOS.Android,开发过程中遇到的问题及解决方案 [1]iframe 直接打开pdf文件(可用于PC端) <iframe src="pdf ...
前端实现pdf文件预览
1.后端返回的是pdf链接 //可以直接使用iframe进行显示 <template><div>//iframe<iframe:src="url"ty ...

React-pdf：pdf预览插件实践

React-pdf：pdf预览插件实践相关推荐

最新文章

热门文章