Recently, I did a music download, downloading with tag a will jump to the url of the audio (it can't be downloaded directly on the current page). After a long time, I finally found this article:
https://www.jianshu.com/p/c31c199e1d5e Download the solution using fetch, collect a wave, thank you old man!
The downloaded file can be downloaded either directly from the href property of the a tag or by converting the blob object to a file stream.Blob objects can be considered if you have a large amount of data or need to download, upload, and so on in pieces.Colleague Blob objects can perform additional operations (blocking, etc.) during the download process, which cannot be done by direct download of a tag.
1.a Label Download File
// This is the traditional way to download
const downloadFileA = document.createElement('a')
document.body.append(downloadFileA)
downloadFileA.href=`https://xxx`
downloadFileA.download = 'Download Files.csv'
// Hyperlink target="_blank" adds rel="noopener noreferrer" to block fishing security vulnerabilities.If you use the target="_blank" attribute on links without adding the rel="noopener" attribute, you expose users to a very simple phishing attack.(Summary)
downloadFileA.rel = 'noopener noreferrer'
downloadFileA.click()
document.body.removeChild(downloadFileA)
2. Binary data stream download that converts files into blob objects
The Blob object is an immutable, raw data class file object.Blob represents data that is not necessarily native to JavaScript. File The interface is blob-based, inherits the blob's functionality and extends it to support files on the user's system.
axios({
method: 'get',
url: `https:/xxx.com${url}`,
// You must explicitly indicate that the response type is a Blob object so that binary data is generated for successful creation through window.URL.createObjectURL
responseType: 'blob',
}).then((res) => {
if (!res) {
return
}
// Convert lob object to domain name combined url
let blobUrl = window.URL.createObjectURL(res.data)
let link = document.createElement('a')
document.body.appendChild(link)
link.style.display = 'none'
link.href = blobUrl
// Set a tag's download properties, set file name and format, suffix name is best for the back end to return in data format
link.download = 'Download Files.csv'
// Self-triggering click event
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(blobUrl);
})
3. Download using fetch request
Use fetch instead of a tag to download MP3 files. In the browser, it is said that using a tag will jump to the page directly for playback, which can't reach the downloaded destination.
// Download the server's P3 file
export const downloadMp3 = (filePath) => {
fetch(filePath).then(res => res.blob()).then(blob => {
const a = document.createElement('a');
document.body.appendChild(a)
a.style.display = 'none'
// url created with the obtained blob object
const url = window.URL.createObjectURL(blob);
a.href = url;
// Specify the file name to download
a.download = 'Voice Audio.mp3';
a.click();
document.body.removeChild(a)
// Remove url of blob object
window.URL.revokeObjectURL(url);
});
}
Restricted scenarios also exist, possibly across domains.At this point, you can have the server students set up cores or switch to using JSONP for cross-domain requests (GET can only be cross-domain).You can see that there are also fetch-jsonp plug-ins for cross-domain, which are encapsulated on the basis of fetch, but they have not been applied yet!
Author: cs0710
Link: https://www.jianshu.com/p/c31c199e1d5e
Source: Short Book
Copyright belongs to the author.For commercial reprinting, please contact the author for authorization. For non-commercial reprinting, please indicate the source.
