`
musicbox95351
  • 浏览: 229187 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

在前端拿到后端传回的pdf文件的byte数组后展示到浏览器

 
阅读更多
这里是一个vue的实现方式,其它方式应该也差不多。
总体思路是请求后端,由后端返回一个pdf文件的byte[],前端拿到数据后,在前端判断文件类型并将byte数组转换成客户端的文件并返回一个文件URL给hmlt标签。

html标签部分-----------------------------------------------------------------
<div>
                    <img :src="erptUrl" />
                    <object :data="erptPdfUrl" type="application/pdf" width="750px" height="750px">
                    <embed :src="erptPdfUrl" type="application/pdf">
                        <p>This browser does not support PDFs. Please download it..</p>
                    </embed>
                </object>
                </div>

js部分----------------------------------------------------------------------------------

......
data:{
erptUrl:  null,//图片显示URL
                erptPdfUrl: null,//PDF显示URL
}
......

let MIMETYPES = {
                   
                    'pdf': 'application/pdf',
                    'jpeg': 'image/jpeg',
                    'jpg': 'image/jpeg',
                    'jpe': 'image/jpeg',
                    'bmp': 'image/bmp',
                   
                };
let config = {
                    method: 'post',
                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
                    responseType: 'blob'
                };

return new Promise((resolve, reject) => {
                    axios
                        .post('请求后台的URL', {请求后台的参数对象}, config)
                        .then(res => {
                            let contentDisposition = res.headers['content-disposition'];
                            if (!contentDisposition) {
                                MessageBox.error('错误信息提示');
                                return;
                            }
                            var reg = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
                            var result = reg.exec(contentDisposition);
                           
                            let fileType = result[1].split('.')[1];
                            let blob = new Blob([res.data], {
                                type: MIMETYPES[fileType] || '.txt'
                            });
                           
    //这里如果判断为pdf文件则用<object><embed></embed></object>展示
                            if(fileType == 'pdf'){
                                this.erptPdfUrl = window.URL.createObjectURL(blob,true);//该方法将生成本地文件并返回一个本地URL
                            }else{
                                this.erptUrl = window.URL.createObjectURL(blob,true);
                            }
                              
                           
                        })
                        .catch(err => {
                            reject(err);
                        });
                });
分享到:
评论

相关推荐

    通过IO流把文件传到前端并下载.zip

    在Java开发中,将文件传输到前端并允许用户下载是一个常见的需求。这个场景通常涉及到服务器端的文件处理、HTTP响应的构建以及前端的交互。在这个过程中,IO流扮演着关键角色,它允许程序高效地读取和写入数据。下面...

    java js图片上传回显

    在IT行业中,前端开发经常需要处理...总结来说,实现“java js图片上传回显”涉及前端JavaScript的文件读取与预览,以及后端Java的文件接收与存储。通过合理的前后端协作,我们可以构建一个稳定且高效的图片上传系统。

    前后端实现:通过雷达图获取用户输入并上传数据到后台

    html前端页面展示模仿Echarts的雷达图(六维蛛网图),用户在雷达图上点击图上节点改变在六个维度上的权重数据,同时将改变后的结果显示在网页前端,并将数据传回服务器。具体介绍参见博客:...

    百度语音转文字,前端传回的base64位录音数据

    综上所述,将前端的Base64录音数据转换为文字,涉及到前端与后端的交互、Base64编码与解码、HTTP请求的构建和发送,以及对百度AI语音识别API的理解和使用。这些技术都是现代Web开发中的重要组成部分,尤其在实现语音...

    「2021」高频前端面试题汇总之浏览器原理篇.pdf

    1. 存储型 XSS:恶意脚本会存储在目标服务器上,当浏览器请求数据时,脚本从服务器传回并执行。 2. 反射型 XSS:攻击者诱导用户访问一个带有恶意代码的 URL 后,服务器端接收数据后处理,然后把带有恶意代码的数据...

    订单信息生成二维码.txt

    后台的订单信息生成二维码,微信通过扫二维码进入app,

    本地图片上传回显

    在IT行业中,本地图片上传回显是一个常见的功能需求,尤其在...综上所述,本地图片上传回显涉及前端与后端的交互,包括文件选择、预览、上传、安全验证和图片处理等多个环节,是构建富交互性Web应用的重要组成部分。

    很好玩的东西用来格式化后台传来的参数

    作为一个前端,我很头疼后台传给我的数据,因为除了文档,在代码里面我几乎无法确定后台会传给我什么数据,时间久了,也不知道前端逻辑到底在乎哪些数据。我需要在前端定义一种数据集,这个数据集可以过滤掉前端不感...

    JS解析后台返回的JSON格式数据实例

    ”)将后台传回的数据转化为JSON格式,否则不需要转换。 遍历json中的array方法: $.each jquery.each for (var i in array) { array[i]. } 以上这篇JS解析后台返回的JSON格式数据实例就是小编分享给大家的全部内容...

    C语言中的字符串数组和字符串指针.pdf

    在数据空间分配方面,通过函数返回字符串数组时,实际上传回的是数组首地址,因此返回一个字符串数组是不可行的,因为局部数组变量在函数返回后会失效,所以无法正确访问存储在局部变量中的字符串数组。然而,通过...

    Ajax JSON处理Servlet传回的值

    在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。JSON(JavaScript Object Notation)是轻量级的数据交换格式...

    WEB浏览器工作原理

    Web 服务器接到后,进行事务处理,处理结果又通过 HTTP 传回给 Web 浏览器,从而在 Web 浏览器上显示出所请求的页面。 4. 关闭连接:当应答结束后,Web 浏览器与 Web 服务器必须断开,以保证其他 Web 浏览器 能够与...

    pdf.worker.js 文件 turn.js 文件

    这个工作线程与主线程通过消息传递通信,将解析好的 PDF 页面数据传回,以便在浏览器中展示。 `turn.js` 是一个用于实现类似翻书效果的 JavaScript 插件,常用于电子书或者文档预览场景。它提供了优雅的页面翻转...

    SSM框架多上传文件图片回显示例

    【SSM框架多上传文件图片回显示例】 ...总的来说,SSM框架下的多文件图片上传是一个涉及到前端交互、后端处理、文件存储和路径管理的综合问题。通过合理配置和编程,可以实现高效且稳定的文件上传和图片显示功能。

    PHP实例开发源码—PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁.zip

    在本实例中,我们可能使用jQuery库的$.ajax()或$.post()方法发送异步请求,将文件数据提交到服务器。这样,用户可以在不离开当前页面的情况下完成上传操作,提供更好的用户体验。同时,我们还需要使用FormData对象来...

    thinkphp竞技游戏展示工作室网站模板+前后端源码

    thinkphp竞技游戏展示工作室网站模板+前后端源码 修复PC首页产品中心错位问题,已打包上传回网盘,如已安装使用,可以下载回本地,提取文件(/template/pc目录下的index.htm文件,/template/pc/skin/css目录下的style...

    Vue+Element ui 根据后台返回数据设置动态表头操作

    在Vue和Element UI框架中,动态设置表头是一项常见的需求,尤其在处理后端返回的不确定数据格式时。本文将详细讲解如何根据后台返回的数据来动态生成Element UI表格的表头。 首先,我们来看第一种情况,即后端返回...

    php图片上传及剪裁

    此外,考虑到移动设备的广泛使用,要确保上传和剪裁功能在不同设备和浏览器上都能正常工作。 总之,PHP图片上传与剪裁涉及前端与后端的协同,需要理解HTML5、JavaScript、jQuery和PHP的相关知识,同时注意安全性...

    layui 上传图片 返回图片地址的方法

    总结起来,使用Layui上传图片并返回图片地址涉及到前端的代码实现以及后端的文件处理。前端通过Layui组件发送上传请求并接收返回信息,后端则要处理文件存储并返回相应的路径信息。两者结合,就完成了图片上传功能的...

    Strues2-Dwr 带进度条文件上传

    在这个场景中,Struts2处理用户界面和服务器端的业务逻辑,而DWR则用于实现实时的前端与后端交互,尤其是文件上传过程中的进度反馈。以下是实现这个功能的关键知识点: 1. **Struts2框架**:Struts2是基于MVC设计...

Global site tag (gtag.js) - Google Analytics