Фронтальное пакетное получение файлов, а также решения для упаковки и сжатия

внешний интерфейс JavaScript

предисловие

Я полагаю, что многие друзья знакомы с фронтальной загрузкой файлов, и существует много форм загрузки файлов.Например, серверная часть возвращает адрес файла, и мы помещаем адрес в<a></a>Нажимаем скачать в ярлыке или возвращаем файловый поток через back-end интерфейс, и мы проведем ряд операций над потоком и так далее.

Есть много решений для загрузки одной части, но когда нам нужно загружать файлы в пакетном режиме, как мы должны это делать?

строить планы

Столкнувшись с этим спросом, мы предложили следующие решения:

Вариант первый: Напрямую получить серверную часть для возврата массива адресов файлов, а затем загрузить их один за другим. Однако каждый раз, когда файл загружается, браузер будет отображать больше задач загрузки;

Вариант 2: серверная часть сначала упаковывает и сжимает файл, а затем интерфейсу нужно только загрузить сжатый файл, но это сильно повлияет на производительность сервера;

третье решение: Или напрямую получите массив адресов файлов, возвращенный серверной частью, загрузите их один за другим, а затем выполните упаковку и обработку сжатия во внешнем интерфейсе.

Честно говоря, когда было упомянуто, что фронт-энд был запакован и сжат, у меня в голове возникло ощущение, что это какие-то мелкие партнеры, как запаковать и сжать фронт-энд? Следующие две отличные библиотеки могут очень хорошо решить нашу проблему.

Здесь упоминается, что ниже приведен пример в среде React, но идеи и использование в других средах на самом деле аналогичны, и следующий контент можно использовать в качестве справочного материала.

JSZip и FileSaver.js

В этом разделе кратко представлены API и использование JSZip и FileSaver.js.

Установить

npm install jszip file-saver

JSZip

JSZip— это библиотека javascript для создания, чтения и редактирования файлов .zip с удобным и простым API.

простой пример

Во-первых, давайте реализуем простой пример, чтобы почувствовать этот очень полезный инструмент.

import React , { useState } from 'react';
import JSZip from 'jszip';
import FileSaver from 'file-saver'; 


const MyButton = () => {

    const downloadFile = () => {
        const zip = new JSZip();
        zip.file("Hello.txt", "Hello World\n");
        zip.generateAsync({type:"blob"})
        .then((content) => { 
            FileSaver(content, "example.zip");
        });
    }

    return (
        <div>
            <button onClick={() => {
                downloadFile()
            }}>下载</button>
        </div>
    )
} 

export default MyButton

Нажмите кнопку загрузки, мы можем получить файл с именемexample.zipzip, откройте zip-файл, там также будет файл с именемHello.txtдокумент.

API

Кратко представим несколько API.

Создайте экземпляр JSZip:

const zip = new JSZip();

Создайте файл:

zip.file("hello.txt", "Hello World\n");

Создайте папку:

zip.folder("file")

Одновременно создавать папки и файлы:

zip.file("file/hello.txt", "Hello World\n");
// 等同于
zip.folder("file").file("hello.txt", "Hello World\n");

Создайте сжатый файл:

мы можем пройти.generateAsync(options)или.generateNodeStream(options)для создания сжатого файла:

let promise = null;
if (JSZip.support.uint8array) {
  promise = zip.generateAsync({type : "uint8array"});
} else {
  promise = zip.generateAsync({type : "string"});
}

Подробный API нажмитеофициальная документация

FileSaver.js

В предыдущем примере мы использовали JSZip, а также использовалиFileSaver.jsэта библиотека. FileSaver.js — это решение для сохранения файлов на стороне клиента, идеально подходящее для создания файлов на стороне клиента.

В примере из предыдущего раздела мы сгенерировали наш.zipФайл сохранен.

грамматика

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

пример

import FileSaver from 'file-saver';

const blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Нажмите, чтобы узнать больше об использованииофициальная документация

Получите файлы пакетами и упакуйте их для скачивания

Мы уже знаем об этих двух библиотеках, и следующим шагом будет реализация наших потребностей. Здесь есть два шага: первый шаг — получить файл, второй — упаковать и сжать.

Адрес исходного файла для работы

Адрес файла здесь — всего лишь простой пример, а фактическое развитие зависит от ситуации.

const data = [
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件一'
    },
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件二'
    },
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件三'
    },
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件四'
    },
];

получить файл

import JSZip from 'jszip';
import FileSaver from 'file-saver';
import requestFile from './requestFile'; //这里是封装的请求函数，大家用自己封装的或者Axios都行

const getFile = (url: string) => {
  return new Promise((resolve, reject) => {
    requestFile(url, {
      method: 'GET',
      responseType: 'blob'
    }).then((res:any) => {
      resolve(res)
    }).catch((error: any) => {
      reject(error)
    })
  })
}

Упаковать и сжать загрузку

Здесь он в основном проходит через массив адресов, затем получает файл из серверной части по адресу, а затем выполняет пакетное сжатие и операцию упаковки файла и, наконец, сохраняет сжатый файл.

/**
 * 打包压缩下载
 * @param data  源文件数组
 * @param fileName  压缩文件的名称
 */
const compressAndDownload = (data: any[], fileName ?: string) => {
  const zip = new JSZip();
  const promises: any[] = [];  //用于存储多个promise
  data.forEach((item: any) => {
    const promise = getFile(item.fileUrl).then((res: any) => {
      const fileName = item.fileName
      zip.file(fileName, res ,{binary: true});
    })
    promises.push(promise)
  })

  Promise.all(promises).then(() => {
    zip.generateAsync({
      type: "blob",
      compression: "DEFLATE",  // STORE：默认不压缩 DEFLATE：需要压缩
      compressionOptions: {
        level: 9               // 压缩等级1~9    1压缩速度最快，9最优压缩方式
      }
    }).then((res: any) => {
      FileSaver.saveAs(res, fileName ? fileName : "压缩包.zip") // 利用file-saver保存文件
    })
  })
}

export default compressAndDownload;

Ссылаться на

stuk.github.io/jszip/

GitHub.com/Eli GRE собирается/FI…

наконец

Используя JSZip и FileSaver.js, мы можем выполнить интегрированную упаковку и сжатие внутренних пакетных файлов, что не только в определенной степени снижает нагрузку на сервер, но и дает людям ощущение, что после загрузки файла он не будет всплывать много задач загрузки одновременно, что также в определенной степени улучшает опыт.

Категории