Due to security factors, the front end cannot directly write to files.
However, in actual business needs, it is inevitable to encounter downloading and previewing of various files.
If the file downloaded by the server is delivered to the front-end in the form of a stream, the front-end usually converts the stream into a borrowedobjectURLattribute to download the file.a标签download
Bolb object
definition
Blob represents a large object of binary type, usually an image, sound or multimedia file. In javaScript, Blob represents an immutable, primitive data-like file object.
Its constructor is as follows:
new Blob(blobParts, options);
blobParts: Array type, which can store any number of ArrayBuffer, ArrayBufferView, Blob or DOMString (will be encoded as UTF-8), and connect them to form the data of the Blob object.options: Optional, used to set the properties of the blob object. The following two properties can be specified:
– type: the MIME type of the array content stored in the blob (the default is ""), for exampleimage/png.
– endings: Whether to convert newline characters, used to specify how the string containing the line ending character \n is written. A value of native means that the line terminator will be changed to a newline character suitable for the file system of the host operating system (the default value is transparent, which means that the terminator saved in the blob will remain unchanged)
For example: (Create Blob from String)
let blob = new Blob(["<html>…</html>"], {
type: 'text/html'});
Please note: the first parameter must be an array[...]
Attributes
The Blob object has two properties, see the table below
| attribute name | describe |
|---|---|
| size | The size of the data contained in the Blob object. The unit is bytes. read only. |
| type | A string indicating the MIME type of the data contained in this Blob object. If the type is unknown, the value is the empty string. read only. |
For example:
const blob = new Blob(['<div>john</div>'], {
type: 'text/xml' });
console.log(blob); // Blob {size: 15, type: "text/xml"}
Front-end implementation of stream file download
const res = await axiosRequest({
url: state.exportUrl,
method: 'post',
data: form,
responseType: 'blob', // 设置返回为二进制流
});
downloadSource(res); // 调用此方法实现下载流文件
// 下载流
const downloadSource = (res: any) => {
let url =(window.URL || window.webkitURL).createObjectURL(new Blob([res], {
type:'application/zip'}));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `${
这里写文件名})`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
new BlobThe second parameter of can be set as follows:
Word file:
.doc The format is set to: application/vnd.msword;charset=utf-8
.docxThe format is set to:application/vnd.openxmlformats-officedocument.wordprocessingml.document
Excel file:
.xls Format is set to: application/vnd.ms-excel
.xlsxFormat is set to:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
zip file:
. zip format is set to:application/zip
https://juejin.cn/post/6844904183661854727
https://juejin.cn/post/6916675943343849479