前端二进制文件流下载

前端下载

如何用ajax请求二进制文件流下载文件
Blob-type

如何用ajax请求二进制文件流下载文件

用jquery封装的$ajax请求的话设置responseType属性是无效的，需要使用原生xhr请求设置

var url = ''
var param ={}
var xhr = new XMLHttpRequest()
xhr.open('post', url);
xhr.responseType = 'blob';     //要加blob类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {if (xhr.readyState == 4 &&  xhr.status == 200) {console.log(xhr)var blob = new Blob([xhr.response],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });var url = window.URL.createObjectURL(blob);var link = document.createElement('a');link.href = url;link.style.display = 'none';var fileName = '文件.docx';var downloadFileName = decodeURIComponent(fileName);link.setAttribute('download', downloadFileName);$('body').append(link);link.click();window.URL.revokeObjectURL(url);}
}var arr = [];
for (var k in param){arr.push(k+'='+param[k]);
}
xhr.send(arr.join('&')); // 发送请求

Blob-type

type		Value
.aac	AAC audio	audio/aac
.abw	AbiWord document	application/x-abiword
.arc	Archive document (multiple files embedded)	application/x-freearc
.avi	AVI: Audio Video Interleave	video/x-msvideo
.azw	Amazon Kindle eBook format	application/vnd.amazon.ebook
.bin	Any kind of binary data	application/octet-stream
.bmp	Windows OS/2 Bitmap Graphics	image/bmp
.bz	BZip archive	application/x-bzip
.bz2	BZip2 archive	application/x-bzip2
.csh	C-Shell script	application/x-csh
.css	Cascading Style Sheets (CSS)	text/css
.csv	Comma-separated values (CSV)	text/csv
.doc	Microsoft Word	application/msword
.docx	Microsoft Word (OpenXML)	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eot	MS Embedded OpenType fonts	application/vnd.ms-fontobject
.epub	Electronic publication (EPUB)	application/epub+zip
.gif	Graphics Interchange Format (GIF)	image/gif
.htm .html	HyperText Markup Language (HTML)	text/html
.ico	Icon format	image/vnd.microsoft.icon
.ics	iCalendar format	text/calendar
.jar	Java Archive (JAR)	application/java-archive
.jpeg .jpg	JPEG images	image/jpeg
.js	JavaScript	text/javascript
.json	JSON format	application/json
.jsonld	JSON-LD format	application/ld+json
.mid .midi	Musical Instrument Digital Interface (MIDI)	audio/midi audio/x-midi
.mjs	JavaScript module	text/javascript
.mp3	MP3 audio	audio/mpeg
.mpeg	MPEG Video	video/mpeg
.mpkg		Apple Installer Package
.odp	OpenDocument presentation document	application/vnd.oasis.opendocument.presentation
.ods	OpenDocument spreadsheet document	application/vnd.oasis.opendocument.spreadsheet
.odt	OpenDocument text document	application/vnd.oasis.opendocument.text
.oga	OGG audio	audio/ogg
.ogv	OGG video	video/ogg
.ogx	OGG	application/ogg
.otf	OpenType font	font/otf
.png	Portable Network Graphics	image/png
.pdf	Adobe Portable Document Format (PDF)	application/pdf
.ppt	Microsoft PowerPoint	application/vnd.ms-powerpoint
.pptx	Microsoft PowerPoint (OpenXML)	application/vnd.openxmlformats-officedocument.presentationml.presentation
.rar	RAR archive	application/x-rar-compressed
.rtf	Rich Text Format (RTF)	application/rtf
.sh	Bourne shell script	application/x-sh
.svg	Scalable Vector Graphics (SVG)	image/svg+xml
.swf	Small web format (SWF) or Adobe Flash document	application/x-shockwave-flash
.tar	Tape Archive (TAR)	application/x-tar
.tif .tiff	Tagged Image File Format (TIFF)	image/tiff
.ttf	TrueType Font	font/ttf
.txt	Text, (generally ASCII or ISO 8859-n)	text/plain
.vsd	Microsoft Visio	application/vnd.visio
.wav	Waveform Audio Format	audio/wav
.weba	WEBM audio	audio/webm
.webm	WEBM video	video/webm
.webp	WEBP image	image/webp
.woff	Web Open Font Format (WOFF)	font/woff
.woff2	Web Open Font Format (WOFF)	font/woff2
.xhtml	XHTML	application/xhtml+xml
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xml	XML	application/xml 代码对普通用户来说不可读 (RFC 3023, section 3)
text/xml	代码对普通用户来说可读 (RFC 3023, section 3)
.xul	XUL	application/vnd.mozilla.xul+xml
.zip	ZIP archive	application/zip
.3gp	3GPP audio/video container	video/3gpp audio/3gpp（若不含视频）
.3g2	3GPP2 audio/video container	video/3gpp2 audio/3gpp2（若不含视频）
.7z	7-zip archive	application/x-7z-compressed

前端二进制文件流下载相关推荐

前端上传预览文件以及下载，node后端存储文件以及返回前端文件流下载
上传文件<div class="inputBox" style="background-color: rgb(63, 137, 212);">上传文 ...
前端下载文件（二进制文件流brob和url下载）
第一种二进制文件流brob下载文件 1首先自己在request封装一个get请求引入main.js import axios from 'axios'; import qs from 'qs'; i ...
前端get请求接收后端传来的二进制文件流blob实现下载功能，解决下载文件打不开问题
解决方法: 前端在请求下载文件接口时,要设置responseType为blob. 前端代码: export function download(url, params) {return ...
vue 后端返回二进制流文件，前端如何实现下载？
目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流: 1.2 使用: 1.3 需要注意以下几点: 2. 关于 arraybuffer 和 blob 2.1 ArrayBuff ...
前端接收二进制文件流（使用blob对象）
前端在做管理系统开发时经常遇到的需求:下载文件入Excel,World,zip 处理方式有两种: 1.后端生成下载地址,前端调用 2.后端返回二进制文件流,前端转换后下载本文主要介绍第二种在向后端 ...
前端关于pdf文件流下载分析和总结
前几天做builder项目有个pdf下载需求,然后把在做这个的问题和方法记录下来(仅供参考). 1.概念有些同学很有可能会疑问,pdf下载和预览功能,什么时候是下载?什么时候是预览? 其实这个和几方 ...
POI动态导出Excel，后台返回文件流，前端responseType格式下载
针对各个表的数据导出,实现的代码往往相似,出于这个目的,开启自己代码简略之旅.本文是针对.xls的excel文件. 1.思路描述 ①.确定各个模板的.xls文件格式 ②.定义模板的存在的参数,如第一行 ...
前端接收并下载文件流（blob对象）(word/.doc)
1 根据文件路径下载文件模板,前端拿到的是stream 文件流 2 将文件流下载下来第一步当然是写请求方法了,如下 //下载模板 export function download (params) ...
前端通过后端返回文件流下载文件
// 把文件流下载下来 const downloadMethods = (name, res) => {const blob = new Blob([res.data], { type: 'ap ...

前端二进制文件流下载

前端下载

如何用ajax请求二进制文件流下载文件

Blob-type

前端二进制文件流下载相关推荐

最新文章

热门文章