Qiniu 파일을 패키지하고 javascript(코드)로 압축을 다운로드하는 방법

이 글의 내용은 자바스크립트를 사용하여 Qiniu 파일을 패키지하고 압축(코드)을 다운로드하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

요구 사항 분석: Qiniu에 저장된 파일 URL을 기반으로 이러한 파일을 압축하고 다운로드합니다.

구현 방법은 파일 콘텐츠를 얻고 jszip을 사용하여 압축한 다음 마지막으로 파일 저장기를 사용하여 저장하고 다운로드하는 것입니다.

두 가지 참고 사항:

1: 일부 웹 프레임워크(예: laravel)는 axios에 대한 기본 요청 헤더를 구성합니다. 파일을 요청할 때 기본 요청 헤더를 제거하고 Content-type을 'application/x-www-form-urlencoded; charset=UTF-8'로 설정해야 합니다. 그렇지 않으면 교차 도메인이 발생합니다.

2: 응답 유형이 바이너리이고 파일이 바이너리로 전달되므로 responseType을 blob으로 설정하세요.

코드 예시 일부:

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);
  });

저장:

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

관련 권장 사항:

Qiniu mkzip 압축 중국어 파일 이름이 깨졌습니다

파일을 일괄 다운로드하고 Vue에서 패키징하는 방법에 대한 자세한 설명 예시

위 내용은 Qiniu 파일을 패키지하고 javascript(코드)로 압축을 다운로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!