antd 实现pdf 预览_解决react项目中PDF的显示与打印问题

最近项目中有这样一个需求：

1. 页面中可以显示pdf

2. 不希望把整个页面打印下来，只打印显示PDF的部分，可以使用浏览器自带打印功能

PDF文件的显示

拿到这个需求，真时一头雾水。因为没有做过类似需求，不知从何下手。在查阅资料的过程中，发现有很多jQuery插件可以实现显示pdf, 但是我们是react单页面应用项目，看来这些插件并不适用，只能另寻其它方法。

后来在npm上找到了react-pdf-js组件, 心想显示pdf有望。就迫不及待将 react-pdf-js 依赖通过 cnpm install react-pdf-js --save-dev 命令安装到项目中，通过 import PDF from 'react-pdf-js' 引入到项目里。将插入render里。

在调试过程中发现静态pdf文件可以显示，在线pdf文件不能显示。通过控制的报错信息了解道，react-pdf-js组件要求file文件地址是url或者base64格式, 既然url行不通，就只能往base64上靠了。

获取PDF文件

一开始我直接将将pdf的在线地址url转换为base64，但是不能显示。后来想明白了，只把url转换成base64格式是没有用的，需要把pdf的文件内容转换成base64才行。接下来就顺理成章，通过从后台获取到的pdf的url地址，再次请求获取到pdf文件。

在做这部分的遇到一个小问题：能请求成功，就是获取不到pdf文件，在这纠结了很久，也不知道该如何解决，把问题描述给我们公司的架构师，我们分析这是跨域问题造成的，他给nginx服务器的配置解决了跨域问题。

antd 实现pdf 预览_解决react项目中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预览引发的vue项目只允许Chrome浏览器访问
前言: 项目中需要把原本下载pdf功能改成在线预览,只能预览不能进行其他操作,通过在地址后面拼接参数可以隐藏掉工具栏,但是只对chrome生效,所以又增加了访问权限,只对chrome浏览器开放,记录一 ...
imac下修改本地hosts文件解决react项目中的跨域问题
1.跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resource. 解决: 1)在本机命令行输入 ...
Immutable入门使用_在react项目中使用redux-immutable
定义不可变数据 (Immutable Data )就是一旦创建,就不能再被更改的数据.对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象.Immutabl ...
解决Web项目中图片无法显示问题
问题描述在web目录下创建了images文件夹用来存放图片,在web目录再创建HTML文件,该文件中的img标签引用了images里面的图片,但是启动服务器时,页面上的图片无法显示. 解决问题将 ...
react pdf预览
pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于 ...
swr，解决 React 项目 API 调用的最好方案
swr,解决 React 项目 API 调用的最好方案搜了一圈,感觉 swr 源码学习的文章不少,但是好像使用方面的确实有限,所以-- 目前体感是觉得使用 swr 会比 redux-saga 要舒服 ...
antd 实现pdf 预览_React下实现pdf在线预览
问题背景因为项目需要,在react项目中需要实现pdf文件的预览. 环境配置 node: v10.18.1 react: v16.8.x yarn: v1.21.1 技术调研截止2020年2月,市 ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...

antd 实现pdf 预览_解决react项目中PDF的显示与打印问题

antd 实现pdf 预览_解决react项目中PDF的显示与打印问题相关推荐

最新文章

热门文章