React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject

预览页面：


import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import URI from 'urijs';
import { rfpUrlPrefix } from 'src/config.urlPrefix';
import PDFObject from 'pdfobject';// style
import './style.less';const ReviewPDF = ({ location }) => {useEffect(() => {const rfpId = URI.parseQuery(location?.search)?.rfpId;const language = URI.parseQuery(location?.search)?.language;const rfpHotelId = URI.parseQuery(location?.search)?.rfpHotelId;const form = URI.parseQuery(location?.search)?.form;fetch(`${rfpUrlPrefix}/${form}/programs/agreement/export?rfpId=${rfpId}&language=${language}&rfpHotelId=${rfpHotelId}`, {method: 'get',responseType: 'arraybuffer'}).then(response => response.blob()).then((data) => {let blob = new Blob([data], { type: 'application/pdf' }); // 将生成bloblet testUrl = window.URL.createObjectURL(blob); // 转成链接PDFObject.embed(testUrl, '.bottom-pdf'); // 第一个参数是转换好的链接，第二个参数是className}).catch((error) => {console.error(error);});}, [location?.search]);return (<div className='bottom-pdf'></div>);};ReviewPDF.propTypes = {location: PropTypes.object
};export default connect()(ReviewPDF);

结构：

需要页面使用方法：

window.open(`${frontendUri}/reviewPDF?rfpId=${rfp?.id}&language=${userProfile?.displayLanguage}&rfpHotelId=${record?.rfpHotelId}&form=${'buyer'}`);

总结：本来后台直接返回个url前端展示的三分钟需求，硬是因为-----种种原因-----后台只能返回PDF数据流，浪费的时间都是进步！加油！

参考文献：
React中后端返回文件流，前端展示PDF
fetch请求获取blob和arraybuffer文件流及核心API使用总结

React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject相关推荐

后端返回一个url前端怎么把音视频文件下载下来
后端返回一个url前端怎么把文件下载下来最近做的项目有一个用腾讯云上传音视频的功能,在后台管理里面需要将音视频下载下来,后端是直接返回腾讯云视频url地址的, // 点击下载文件downloadFi ...
【前端实现在线预览ppt、word、xls、pdf、视频】
前端实现在线预览ppt.word.xls.pdf.视频一. 预览ppt.word.xls 注意:无法打开文档? 二. pdf 三. 视频预览一. 预览ppt.word.xls 转载地址: http ...
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
前端页面预览word_前端实现在线预览文档
前端实现在线预览文档发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...
DevExpress的PdfViewer添加工具栏实现PDF打开、预览、保存、打印
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...
学成在线第4天讲义-页面静态化页面预览
1页面静态化需求 1.为什么要进行页面管理? 本项目cms系统的功能就是根据运营需要,对门户等子系统的部分页面进行管理,从而实现快速根据用户需求修改页面内容并上线的需求. 2.如何修改页面的内容? ...
前端实现在线预览文档
前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式的文档,网上查找了很多资源,各说纷纭,但是在一一尝试之后只有使用微软的预览接口才能成功,其他的会出现各 ...
学成在线--10.页面预览
文章目录一.需求分析二. 搭建环境 1.在cms服务中集成freemarker: 2.在application.yml配置freemarker 三.Service 四.Controller 五.页 ...
java零碎要点010---Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...

React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject

预览页面：

结构：

需要页面使用方法：

总结：本来后台直接返回个url前端展示的三分钟需求，硬是因为-----种种原因-----后台只能返回PDF数据流，浪费的时间都是进步！加油！

React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject相关推荐

最新文章

热门文章