这里是一个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);
});
});
分享到:
相关推荐
后台的订单信息生成二维码,微信通过扫二维码进入app,
作为一个前端,我很头疼后台传给我的数据,因为除了文档,在代码里面我几乎无法确定后台会传给我什么数据,时间久了,也不知道前端逻辑到底在乎哪些数据。我需要在前端定义一种数据集,这个数据集可以过滤掉前端不感...
”)将后台传回的数据转化为JSON格式,否则不需要转换。 遍历json中的array方法: $.each jquery.each for (var i in array) { array[i]. } 以上这篇JS解析后台返回的JSON格式数据实例就是小编分享给大家的全部内容...
百度语音转文字,根据前端传回的base64位录音数据,转成字节,再将字节数据利用百度ai语音识别转成文字,传回前端
从客户端处理服务器传来的JSON值 自己写的一个小例子,运行无异常.
本源码主要是ASP.net后台通过相应的类把word\excel\pdf\txt文件转化为html,将地址传回前端,前端获取地址,用iframe进行展现预览。
thinkphp竞技游戏展示工作室网站模板+前后端源码 修复PC首页产品中心错位问题,已打包上传回网盘,如已安装使用,可以下载回本地,提取文件(/template/pc目录下的index.htm文件,/template/pc/skin/css目录下的style...
通过后端的爬虫程序在各类在线平台或者招聘网站上获取的数据信息,保存到mysql数据库表,再经过可视化技术传回给前端界面,就能实现饼图、直方图、折线图、扇图等丰富的展示形式。基于python招聘岗位数据爬虫及可视...
通过后端的爬虫程序在各类在线平台或者招聘网站上获取的数据信息,保存到mysql数据库表,再经过可视化技术传回给前端界面,就能实现饼图、直方图、折线图、扇图等丰富的展示形式。 基于python招聘岗位数据爬虫及...
<input type=text name=dishes value= class=seek_product placeholder=请输入菜名/> <button type='button' class=btn_nor onclick=seek_product()>搜索</button>...th width=70%
### 爬虫端 ... 信息:获得网站收录的13033位诗人信息及作品 ...处理业务逻辑,主要为搜索,根据前端查询所传回后端的值,就行相应的查询数据库操作。 本项目只需设计两种表:一张诗人表,一张诗词表
1、灵活的图形化增加和删除节点;删除和恢复删除节点后,其他节点的序号自动变更。 2、将用户定义的节点信息生成json格式。 3、后端传回的json格式的数据,在前端显示。
通过后端的爬虫程序在各类在线平台或者招聘网站上获取的数据信息,保存到mysql数据库表,再经过可视化技术传回给前端界面,就能实现饼图、直方图、折线图、扇图等丰富的展示形式!项目内README.md文件内有详细的项目...
基于python招聘岗位数据爬虫及可视...通过后端的爬虫程序在各类在线平台或者招聘网站上获取的数据信息,保存到mysql数据库表,再经过可视化技术传回给前端界面,就能实现饼图、直方图、折线图、扇图等丰富的展示形式。
基于python招聘岗位数据爬虫及可视...通过后端的爬虫程序在各类在线平台或者招聘网站上获取的数据信息,保存到mysql数据库表,再经过可视化技术传回给前端界面,就能实现饼图、直方图、折线图、扇图等丰富的展示形式。
html前端页面展示模仿Echarts的雷达图(六维蛛网图),用户在雷达图上点击图上节点改变在六个维度上的权重数据,同时将改变后的结果显示在网页前端,并将数据传回服务器。具体介绍参见博客:...
java后端源码部署 kkFileViewOfficeEdit 对 进行了二次开发。整合了openOffice进来,项目体积更大了!但使用和配置更简单,只需要配置redis即可 码云: 文件在线预览使用方法 IP+端口+项目名/onlinePreview?url=你的...
# Python_Recruit_Crawler_...通过后端的爬虫程序在各类在线平台或者招聘网站上获取的数据信息,保存到mysql数据库表,再经过可视化技术传回给前端界面,就能实现饼图、直方图、折线图、扇图等丰富的展示形式。
基于jq实现的微信网页授权获取js源代码,可向后端传回openid来绑定用户身份,或是进行身份识别。
本源码主要是ASP.net后台通过相应的类把word\excel\pdf\txt文件转化为html,将地址传回前端,前端获取地址,用iframe进行展现预览。