Realization of personnel export function in Vue

Outline:

---

  1. Export the defined export.js file code display

import axios from 'axios'
//导出一
export const exportExcel = (url, params, name, type = 'post') => {
	// url url路径 params 查询参数 name 文件名 type 请求方式
	axios[type](url, params, {
		responseType: 'blob',
	}).then(res => {
		let blob = new Blob([res.data], {
			type: 'application/vnd.ms-excel',
			'Content-Type': 'application/vnd.ms-excel'
		});
		let downloadElement = document.createElement('a');
		let href = window.URL.createObjectURL(blob); //创建下载的链接
		downloadElement.href = href;
		downloadElement.download = name || '未命名.xls'; //下载后文件名
		document.body.appendChild(downloadElement);
		downloadElement.click(); //点击下载
		document.body.removeChild(downloadElement); //下载完成移除元素
		window.URL.revokeObjectURL(href); //释放掉blob对象
	})
};
//导出二
export const getExcel = (u, f) => {
	axios.get(u, {
		responseType: 'blob'
	}).then(res => {
		let blob = new Blob([res.data], {
			type: 'application/vnd.ms-excel',
			'Content-Type': 'application/vnd.ms-excel'
		});
		let downloadElement = document.createElement('a');
		let href = window.URL.createObjectURL(blob); //创建下载的链接
		downloadElement.href = href;
		downloadElement.download = f || '未命名.xls'; //下载后文件名
		document.body.appendChild(downloadElement);
		downloadElement.click(); //点击下载
		document.body.removeChild(downloadElement); //下载完成移除元素
		window.URL.revokeObjectURL(href); //释放掉blob对象
	})
};

 2. Introduce the export method on the page with the export function

 If the interface is a GET request, the export here uses the getExcel export method

 deriveExpor() {
    var jsondata = 'orgId='+this.orgId+'&jobNo='+this.jobNo+'&name='+this.name;
    //调用导出方法
    getExcel('/api/admin/staff/staffExport?' + jsondata,'人员资料')
 },

 Different requests have different ways of passing parameters; the following is a POST request

getExport(){
  let jsondata = {
     opUser: this.opUser,
     jobNo: this.jobNo,
     name: this.name,
  }
  exportExcel('/api/admin/card/info/log_list_export', {...jsondata}, '卡操作日志', 'post')
},

Export effect display:

---

Foreword:

        The above code is a function to export an Excel file, using the axios library to send a request and get the binary data of the Excel file. Convert the binary data to a Blob object , create a download link, and then simulate clicking the download link to download the file.

Detailed export code (export 1):

1. Use the axios library to send a request. The URL path of the request is url, the parameter of the request is params, and the default request method is POST ( typeother request methods can be specified by parameters).

2. In the response to the request, convert the response data to a Blob object and specify the MIME type as application/vnd.ms-excel, ie, an Excel file.

3. Create an <a>element and assign the download link to the hrefattribute.

4. Specify the file name, the default is 未命名.xls( namethe file name can be specified by parameter).

5. Add <a>elements to document.body.

6. Simulate clicking on <a>an element to trigger a file download.

7. After the download is complete document.body, remove <a>the element from it.

8. Release the URL resource corresponding to the Blob object.

9. Note: When calling this function, parameters such as the URL path, request parameters, and file name need to be passed in.

Foreword:

      The second piece of code above is a function to obtain and download an Excel file; the axios library is used to send a GET request to obtain the binary data of the Excel file.

Detailed export code (export 2):

1. Use the axios library to send a GET request, and the URL path of the request isu;

2. In the response to the request, convert the response data to a Blob object and specify the MIME type as application/vnd.ms-excel, ie, an Excel file.

3. Create an <a>element and assign the download link to the hrefattribute.

4. The following steps are the same as exporting a method

Expand small knowledge:

 MIME (Multipurpose Internet Mail Extensions) types are a way of identifying file types and formats.

It represents the media type of a file by using a specific string in protocols such as HTTP and Email.

   In programming, it is often necessary to determine the corresponding MIME type according to the extension or content type of the file , so as to process and parse the file data correctly.