How does javascript package Qiniu files and download compression (code)

The content of this article is about how to package Qiniu files and download compression (code) with javascript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Requirement analysis: Pack and download these files based on the file URLs stored in Qiniu.

Implementation method, obtain the file content, use jszip to compress, and finally use file-saver to save and download.

Two points to note:

1: Some web frameworks (such as laravel) will configure default request headers for axios. When requesting a file, you need to remove the default request header and set the Content-type to 'application/x-www-form-urlencoded; charset=UTF-8', otherwise it will cause cross-domain.

2: The response type is binary, and the file is passed in binary, so set the responseType to blob.

Part of the code example:

import JSZip from 'jszip'
import filesaver from "file-saver"
var zip = new JSZip();
// 我用的 axios 需要把这两个 header 删掉
delete window.axios.defaults.headers.common['X-Requested-With'];
delete window.axios.defaults.headers.common['X-CSRF-TOKEN'];
axios.get(file.file_url, {
    responseType: 'blob',
    headers : {
      'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  }).then(function(res){
    var response = res.data;
    zip.file(file.id + "_" + file.name, response, {binary: true});
    // do your job
  }).catch(function(error){
    console.error(error);
  });

Save:

zip.generateAsync({
  type: "blob"
}).then((blob) => {
  filesaver.saveAs(blob, this.current_zip_name)
}, (err) => {
  alert('导出失败')
});

Related recommendations:

Qiniu mkzip compressed Chinese file names with garbled characters

Detailed example of batch downloading and packaging of files in Vue method

The above is the detailed content of How does javascript package Qiniu files and download compression (code). For more information, please follow other related articles on the PHP Chinese website!