How to download native binary array files with Blob in Vue
This article mainly introduces Vue how to use Blob to download native binary array files related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this Vue how to use Blob to download native binary array files article will have a harvest, let's take a look at it.
The binary array (JSON format) pushed from the server needs to be processed into a JS native array at the front end before it can be made into Blob. There are two points to note (detailed notes). The code is as follows:
Vue.prototype.$downloadFile = (filename, data) = > {if (! data) return; let arr8 = Uint8Array.from (data); / /!! Note 1: the appropriate JS native array type should be selected according to the type of data, that is, the byte array pushed by the server or the int array pushed by the server. / / define the content of the file. The type must be Blob or createObjectURL will report an error let blob = null; let type = 'application/octet-binary'; if (typeof (window.Blob) = = "function") {blob = new Blob ([arr8], {/ /! Note 2: [] type: type});} else {let BlobBuilder = window.BlobBuilder | | window.MozBlobBuilder | | window.WebKitBlobBuilder | | window.MSBlobBuilder; let bb = new BlobBuilder (); bb.append ([arr8]); blob = bb.getBlob (type);} let URL = window.URL | | window.webkitURL; let bloburl = URL.createObjectURL (blob); let anchor = document.createElement ("a"); if ('download' in anchor) {anchor.style.visibility = "hidden" Anchor.href = bloburl; anchor.download = filename; document.body.appendChild (anchor); let evt = document.createEvent ("MouseEvents"); evt.initEvent ("click", true, true); anchor.dispatchEvent (evt); document.body.removeChild (anchor);} else if (navigator.msSaveBlob) {navigator.msSaveBlob (blob, filename);} else {location.href = bloburl;} / / remove link release resources} This is the end of the article on "how Vue uses Blob to download native binary array files". Thank you for reading! I believe that everyone has a certain understanding of "how Vue uses Blob to download native binary array files". If you want to learn more, you are welcome to follow the industry information channel.
