Simple code for implementing Vue3 file download method

File download method

1. Method

Notice:
When the file name is Chinese, you must use encodeURI to transcode;
The file will be opened directly when the file format is picture or txt;
Hereinafter, ${ url } represents the interface address

Download according to file name:

	 = `${url}/file name.xlsx`;

File name is in Chinese:

	 = `${url}/${encodeURI("File name.xlsx")}`;

Download according to interface and parameters (file name is unknown):

	 = `${url}?flag=1&id=${id}`;

When there are many parameters:

	import Qs from 'qs'
	let params = {
		id:1,
		name:'Zhang San'
	}
	let paramStr = (params);
	 = `${url}?${paramStr}`

2. Return the file stream in the background, simulate a link download

 	this.$(${url}/${fileName}`, {
      responseType: "blob",
     }).then((response) =&gt; {
       //If you don't add data to the Blob([res]), you will return to the [objece objece] content in the figure below (take one less layer)       const blob = new Blob([]); 
       const elink = ('a');
        = 'File name.xlsx';
        = 'none';
        = (blob);
       (elink);
       ();
       (); // Release URL object       (elink);
     }).catch((error) =&gt; {
       this.$message({
         message: error
       });
     });

Summarize

This is the end of this article about the implementation of Vue3 file download method. For more related content on Vue3 file download method, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!