ajax提交用流的方式,ajax 请求 后台返回的文件流

download(url) {

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true); // 也可以使用POST方式,根据接口

xhr.responseType = "blob"; // 返回类型blob

// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑

xhr.onload = function () {

// 请求完成

if (this.status === 200) {

// 返回200

var blob = this.response;

var reader = new FileReader();

reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href

reader.onload = function (e) {

// 转换完成,创建一个a标签用于下载

var a = document.createElement('a');

a.download = 'data.xlsx';

a.href = e.target.result;

// $("body").append(a); // 修复firefox中无法触发click

a.click();

// $(a).remove();

}

}

};

// 发送ajax请求

xhr.send()

}

前置知识

a标签的属性

http://www.w3school.com.cn/tags/tag_a.asp

js 的 blob对象

http://blog.csdn.net/oscar999/article/details/36373183

dataUrl

http://www.webhek.com/post/data-url.html

Blob 对象的基本应用

http://www.cnblogs.com/wangfajing/p/7202139.html?utm_source=itdadao&utm_medium=referral

fileReader

http://blog.csdn.net/yaoyuan_difang/article/details/38582697

Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法

http://www.jb51.net/article/122797.htm

XMLHttpRequest Level 2 使用指南

http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

ajax请求后台返回map类型并如何展示

前台jsp或者ftl文件接收返回结果:

后台返回excel文件流,js下载

/** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...

前台返回json数据的常用方式+常用的AJAX请求后台数据方式

我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

ajax请求后台有时走有时不走

ajax请求后台有时走有时不走   ajax请求后台有时走有时不走,是因为没有将请求设置为同步方式,async:false,(默认为true即异步).如果不想使用缓存可以将cache:false,例如 ...

jQuery ajax请求错误返回status 0和错误error的问题

上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

使用ajax请求SpringMVC返回Json出现乱码解决方法

1:在使用ajax请求后台访问数据的数据,后台返回的数据是乱码,带??问号的乱码,之前还一直没有遇到过,在这里记录整理一下,贴出解决代码! (1):前台使用ajax ,已经设定返回的结果为json格式 ...

关于后台返回excel文件的问题

一般情况ajax请求只能获取解析非流文件类型,而excel是流文件类型,这个时候获取到的数据会是一串乱码的字符串 想要下载这个excel文件,通过form表单模拟的方式可以解决 var form = ...

jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

随机推荐

vi编辑器使用相关

一.vi的使用 1.vi一共分为3种模式,分别是一般模式.编辑模式和命令行模式 2.一般模式:以vi打开一个文件就直接进入一般模式(也是默认的模式). 在这个模式下可以使用上下左右移动光标,还可以删除 ...

Spring MVC防御CSRF、XSS和SQL注入攻击

参考: http://www.myhack58.com/Article/html/3/7/2012/36142_6.htm http://blog.csdn.net/jasontome/article ...

原创新闻 11 个最佳 jQuery 滚动条插件

通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

Oracle 数据库表空间碎片查询和整理

dba_free_space 显示的是有free 空间的tablespace ,如果一个tablespace 的free 空间不连续,那每段free空间都会在dba_free_space中存在一条记录 ...

AD认证

这两天接触到一个新的知识点,AD验证.什么是AD验证?Active Directory——活动目录,活动目录只是LDAP的一个实现,提供LDAP认证.Radius认证和NTML认证,都是标准认证方式 ...

unix c 07

进程的结束函数 (exit._Exit)    exit 并不是立即退出,退出前执行 用atexit/on_exit函数 注册的函数.    exit(int status)中的status可以用 w ...

CHD 2014迎新杯比赛题解

A. 草滩的魔法学校 分析: 高精度乘法 或 JAVA大数类 很明显 10000 的阶乘已经远远超过 64 位数能表示的范围了.所以我们要用一个比较大的数组来存放这个数.那数组要开多少位合适呢?我们不 ...

PHP开发中涉及到emoji表情的几种处理方法

最近几个月做微信开发比较多,存储微信昵称必不可少 可这万恶的微信支持emoji表情做昵称,这就有点蛋疼了 一般Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面insert一 ...

以实例说明微服务拆分(以SpringCloud+Gradle)

前言 之前,我都是说了很多的关于微服务的概念,说到底,很多人看了之后会认为没有什么意思,因为没有实际的东西说明,即使每个概念都明白了,也很难赋之实践.所以这次,我来用一个实际的例子去说明,在实际的项目 ...

c++11の数据竞争和互斥对象

一.数据竞争的产生 在下面例子中: void function_1() { ; i < ; i++) { std::cout << "from function 1:&qu ...

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在前端页面展示后台返回的 PDF 文件,可以通过以下步骤实现: 1. 后台返回 PDF 文件:确保后台接口正确地返回 PDF 文件的字节。这通常可以通过使用合适的后台框架或库来实现。 2. 前端接收文件:在前端使用 JavaScript,通过 AJAX 或 Fetch API 发起请求,获取后台返回的 PDF 文件。可以将文件保存到一个变量中。 3. 创建 Blob 对象:使用 JavaScript 的 Blob 对象,将文件转换为可供浏览器解析的对象。Blob 对象代表了一个不可变的、原始数据的类文件对象。 ```javascript // 假设后台返回文件保存在 response 中 var blob = new Blob([response], { type: 'application/pdf' }); ``` 在上述代码中,我们使用 Blob 构造函数,将后台返回文件 response 转换为 Blob 对象,并指定 MIME 类型为 'application/pdf'。 4. 创建 URL 对象:使用 JavaScript 的 URL 对象,创建一个指向 Blob 对象的 URL。这个 URL 可以被用于在浏览器中打开或下载文件。 ```javascript var fileUrl = URL.createObjectURL(blob); ``` 在上述代码中,我们使用 URL.createObjectURL() 函数,将 Blob 对象转换为 URL。这个 URL 可以被用于在浏览器中展示或下载文件。 5. 展示 PDF 文件:可以使用 `<iframe>` 元素或者 PDF.js 等技术在前端页面中展示 PDF 文件。 使用 `<iframe>` 展示 PDF 文件: ```html <iframe src="fileUrl" width="100%" height="500px"></iframe> ``` 在上述代码中,我们将前面创建的 fileUrl 设置为 `<iframe>` 的 src 属性,从而在页面中展示 PDF 文件。 使用 PDF.js 展示 PDF 文件:PDF.js 是一个开源的 JavaScript 库,可以在前端页面中渲染和展示 PDF 文件。您可以参考 PDF.js 的文档和示例来了解如何在页面中使用它。 通过上述步骤,您可以将后台返回的 PDF 文件展示在前端页面中,并提供给用户查看或下载。请注意,这只是一种基本的实现方式,具体的实现可能会根据您使用的前端框架或库有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值