[ Written in the front ] In fact, I also wrote about the download of java implementation files before, but at that time it was limited to excel documents, and there was no introduction for other types. This time, a customer just gave feedback on the spot, saying that our system can indeed Download the report, but the leaders of Party A need to read all the reports, so I have to click to download one by one every day, and then package them for their leaders. Can this be achieved by selecting multiple pieces of data, and then forming a compressed package before downloading?
Now that I have said so much, can I say no?
Involved knowledge points : front-end download returns garbled characters, front-end call interface returns file stream, compressed package rar download, how to realize word package download, various front-end common document download requests, realize front-end download of zip, rar, word, excel and other files , multiple front-end files are packaged and downloaded, and the MIME type is complete.
[Huangbang] Those who support bloggers can see the Huangbang , waiting for you to be on the list!
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane, If you have any doubts, please leave a message and send a private message!
Table of contents
renderings
Of course, this time we are looking at it from the front-end perspective. If you want to understand the logic of the back-end code, you can read my previous article on java to achieve file download.
1. Front-end file download
1.1 5 ways to download files from the front end
A, a label method
It is suitable for downloading a single file, especially if there are special requirements for the file name. Normally, the following two methods can be used:
directly in href:
< a href="/images/download.jpg" download="myFileName">
Actively create and trigger click events:
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = window.URL.createObjectURL(blob);
aLink.download = '日检列表汇总.rar';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
B. location.href method
Mainly applicable to unknown file formats, such as pictures, html, pdf and other web pages that can be recognized will be opened directly
window.location.href = url
C. window.open method
Mainly applicable to unknown file formats, such as pictures, html, pdf and other web pages that can be recognized will be opened directly
window.open(url)
D. File stream mode
What is passed to the front-end is in the form of a stream, in binary form, and the front-end displays some garbled characters in black boxes. This method supports multiple file downloads, post request downloads, custom file names and other methods, which are specifically introduced in 1.2 below.
E. Create an iframe tag form form submission method
In fact, it is very similar to the second method of the a tag, one is click and the other is submit, as shown below:
var config = $.extend(true, {
method: 'post'
}, options);
var $iframe = $('<iframe id="down-file-iframe" />');
var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
$form.attr('action', config.url);
for (var key in config.data) {
$form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
}
$iframe.append($form);
$(document.body).append($iframe);
$form[0].submit();
$iframe.remove();
1.2 Front-end parsing in binary stream form (with source code)
1.2.1 Recurrence of garbled characters
First of all, I will give you a universal code shelf that returns the form of binary byte stream. The stream format interface returns to the console as shown in the figure:
1.2.2 Receive file stream front-end source code
Parsing stream source code (rar file download as an example):
var _data = [];
var url = getContextPath()+"/joblog/batchDownloadDailyReport";
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", url, true);
xhr.onload = function () {
const blob = new Blob([this.response], {
type:"application/x-rar-compressed"});
if(blob.size < 1) {
alert('导出失败，导出的内容为空！');
return;
}
if(window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, 'test.rar')
} else {
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = window.URL.createObjectURL(blob);
aLink.download = '日检列表汇总.rar';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
return;
}
}
xhr.setRequestHeader("Authorization", "xxx");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(_data));
In fact, the core points lie in the following points:
A. The type is application/x-rar-compressed
B. Create a tag and actively trigger a click
C. The send event of xhr will pass parameters into the request body.
Basically, with this method, you don't have to be afraid of the file stream format anymore.
2. Summary of MIME types
In fact, there are many types of front-end download files, as follows (in alphabetical order):
| extension name | document type | MIME type |
|---|---|---|
| .aac | AAC audio | audio/aac |
| abv | 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 | application/vnd.apple.installer+xml |
| .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 |
| 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 |
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane, If you have any doubts, please leave a message and send a private message!
3. Easter eggs on the emperor list
Dedicated to creating a masterpiece, I would like to solve your confusion. If you are lucky, I hope you will be on the list to help out. Thank you very much! Click here for the entrance of
Huangbang