How to use AngularJS to implement the function of downloading excel files

This article mainly introduces the function of AngularJS to download the excel file generated by php based on http request. It analyzes AngularJS http request and file downloading and other related operation skills in the form of examples. Friends who need it can refer to it

The example in this article describes how AngularJS implements the function of downloading excel files generated by php based on http requests. Share it with everyone for your reference, the details are as follows:

Students who use the PHPExcel plug-in all know that exporting excel directly modifies the content-type of the generated content to download the content as a file. At this time, there needs to be something on the page A url to download by clicking.

Then the question is, if there are request parameters when generating excel, it can only be requested through js http request. How to download it at this time?

After some research, there are several ways:

1. angularjs creates a tag to simulate download

// 创建a标签模拟下载
function exportExcel(params, filename) {
  return $http({
    url: '/api/exportExcel',
    method: "POST",
    headers: {
      'Content-type': 'application/json'
    },
    params: params,
    responseType: 'arraybuffer'
  }).success(function (data) {
    var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    var objectUrl = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', filename);
    a.click();
    URL.revokeObjectURL(objectUrl);
  });
}

This Please note in the method that if you are transferring an xls file, that is, an excel5 file, the type must be set to application/vnd.ms-excel or application/x-excel.

2. js generates the url from the request parameters, creates a tag

// 生成下载url
$scope.data.down_url = "../c_potential/get_excel?end_time="+$scope.end_date+"&liable="+liable+"&nickname="+$scope.data.nickname+"&province="+$scope.data.province_cur+"&start_time="+$scope.start_date;

and then binds the url to a certain a tag, this This method is suitable for situations where there are fewer parameters, and the data will not be processed twice, making errors less likely to occur. The only disadvantage is that it needs to be processed twice. You can set two buttons, one for generating, writing the parameters into the URL, and the second button to download excel. Although the user operates twice, only one http request actually occurs, which does not affect performance.

3. First generate and then download

The third method is similar to the second one. First generate the excel file, save it to the server, and then download it. . It involves disk IO, so the performance is relatively low. This method is not recommended. It is just recorded as a method.

The angularjs simulated download method is the most convenient, but errors may occur. The second method is the safest.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to compile, package and view the index file in vue

How to use Jade template in vue

Passing templates to components in Angular

The above is the detailed content of How to use AngularJS to implement the function of downloading excel files. For more information, please follow other related articles on the PHP Chinese website!