Внешний интерфейс использует объект Blob для создания указанного файла и его загрузки.

внешний интерфейс Операционная система Безопасность JavaScript

1. Объект блоба

Объект BLOB представляет объект файла класса, который однозначно, необработанные данные. Большие двоичные объекты не обязательно представляют данные в собственном формате JavaScript. Интерфейс файла основан на BLOB, наследует функцию BLOB и расширяет его для поддержки файлов в пользовательской системе.

Конструктор

var aBlob = new Blob( array, options );
  • array — это массив объектов, таких как ArrayBuffer (буфер двоичных данных), ArrayBufferView (представление буфера двоичных данных в виде массива), Blob, DOMString и т. д., или смесь других подобных объектов, которые будут помещены в Blob. DOMStrings будут закодированы как UTF-8.
  • options является необязательным, он может указывать следующие два свойства:
    • type, значением по умолчанию является "", которое представляет тип MIME содержимого массива, которое будет помещено в большой двоичный объект.
    • окончания, которые по умолчанию являются «прозрачными», используются для указания того, как записываются строки, содержащие окончания строк \n. Это одно из двух значений: «собственный», что означает, что разделитель строки будет изменен на символ новой строки, подходящий для файловой системы основной операционной системы, или «прозрачный», что означает, что разделитель, хранящийся в большом двоичном объекте, останется неизменным.

Пример

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});

Во-вторых, объект URL

Укажите ссылку для скачивания файла, создав объект URL.

Конструктор

Создает новый URL-адрес, представляющий указанный объект File или объект Blob.

objectURL = window.URL.createObjectURL(blob);

window.URL.revokeObjectURL()

при каждом звонкеcreateObjectURLсоздается новый объект URL, даже если вы уже создали его с тем же объектом в качестве параметра. Когда эти объекты URL больше не нужны, каждый объект должен бытьURL.revokeObjectURLметод освобождения. Браузер автоматически освобождает их при выходе из документа, но для оптимальной производительности и использования памяти вы должны активно освобождать их, когда это безопасно.

window.URL.revokeObjectURL(objectURL);

3. Используйте<a>Загрузка тега

генерировать<a>Этикетка.

const link = document.createElement('a');

Атрибут href указывает ссылку для скачивания

link.href = window.URL.createObjectURL(blob);

Атрибут загрузки указывает имя файла

Атрибут загрузки указывает цель гиперссылки для загрузки. существует<a>Атрибут href должен быть установлен в теге. Этому свойству также можно присвоить значение, указывающее имя загруженного файла. Допустимые значения не ограничены, браузер автоматически определит правильное расширение файла и добавит его к файлу (.img, .pdf, .txt, .html и т. д.).

link.download = fileName;

Событие click() запускает загрузку

link.click();

4. Создайте и скачайте

Выберите подходящий тип MIME и установите кодировку.

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], type: 'application/vnd.ms-excel;charset=utf-8');
const fileName = `${new Date().valueOf()}.xls`;
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);

Примечание: Чтобы скачать файл с указанным расширением, вам нужно только сравнитьСправочное руководство по MIMEПросто установите тип.

5, совместимый IE

В IE для использованияwindow.navigator.msSaveOrOpenBlobдля обработки объектов Blob.

window.navigator.msSaveOrOpenBlob(blob, fileName);

Шесть, Написание обещаний

Основано на написании аксиом.

axios.get(`url`, {
        responseType: 'arraybuffer',
    }).then(res => {
        if (res.status == 200) {
            let blob = new Blob([res.data], {
                type: 'application/vnd.ms-excel;charset=utf-8'
            });
            let fileName = `yourfile.xls`;
            // for IE
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
                // for Non-IE
                let objectUrl = URL.createObjectURL(blob);
                let link = document.createElement("a");
                link.href = objectUrl;
                link.setAttribute("download", fileName);
                document.body.appendChild(link);
                link.click();
                window.URL.revokeObjectURL(link.href);
            }
        } else {
            // error handler
        }
    });
Категории