Чистый JS генерирует и загружает различные текстовые файлы или изображения

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

Эта статья воспроизведена из:Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу

1. HTML и загрузка файла

Если вы хотите напрямую инициировать загрузку некоторых ресурсов на стороне внешнего интерфейса, самый удобный и быстрый способ — использовать нативный HTML5.downloadсвойства, такие как:

<a href="large.jpg" download>下载</a>

Конкретное описание может означать мою предыдущую статью:Понимание атрибута загрузки в HTML/HTML5".

Но очевидно, что если вы используете только атрибуты HTML для загрузки файлов (а не открываете или просматриваете браузер), вы ничего не можете сделать с динамическим контентом.

Например, когда мы делимся страницей, мы надеемся, что общедоступное изображение является скриншотом содержимого страницы в реальном времени. В настоящее время изображение является динамическим, и чистый HTML явно не может удовлетворить наши потребности. JS и некоторые другие функции HTML5, например Преобразование элементов страницы вcanvas, а затем преобразовать его в картинку для скачивания, см. "Знакомство с SVG и его применение, например скриншоты"Текст.

Однако загрузка, которую мы представим в этой статье, — это не загрузка изображений, а загрузка текстовой информации.canvas, но другое.

Во-вторых, с помощью HTML5 Blob для загрузки файла с текстовой информацией.

Если вы не знаете о Блобе, вы можете сначала прочитать то, что я написал много лет назад"Понимание типов данных DOMString, Document, FormData, Blob, File, ArrayBuffer."Текст.

Принцип очень простой, мы можем текстовую строку или JS информацию с помощью Blob преобразовать в бинарную, а потом, как<a>элементальhrefатрибуты, подходятdownloadсвойства для загрузки.

Код также относительно прост, как показано ниже (совместим с Chrome и Firefox):

var funDownload = function (content, filename) {
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

в,contentОтносится к тексту или строковому содержимому, которое необходимо загрузить.filenameОтносится к имени файла, загруженного в систему.

Всякие слова не передают смысла, но пример приходит на ум.

Вы можете нажать здесь:Демонстрация загрузки файла в формате HTML на основе funDownload

Нажмите кнопку «Загрузить», все содержимое текстового поля будет использоваться как.htmlФайл суффикса загружается, и каждый процесс приводит к следующему результату:

下载按钮点击示意

Появится окно подтверждения загрузки (оно также может быть загружено напрямую в зависимости от настроек браузера), а затем имя по умолчаниюtest.html.

默认就是test.html名称

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

保存好的test.html文件截图示意

дважды щелкнитеtest.htmlФайл можно нормально просмотреть в браузере, а описание и информация для сохранения верны.

test.html在浏览器中访问的效果

Код JS, запускающий загрузку, состоит всего из нескольких строк:

button.addEventListener('click', function () {
    funDownload(textarea.value, 'test.html');	
});

В-третьих, используйте Base64 для загрузки произвольного файла.

Для нетекстовых файлов загрузка также может быть запущена непосредственно JS.Например, если мы хотим загрузить изображение, мы можем преобразовать изображение в формат base64 и загрузить его.

Подсказка кода:

var funDownload = function (domImg, filename) {
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 图片转base64地址
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var width = domImg.naturalWidth;
    var height = domImg.naturalHeight;    context.drawImage(domImg, 0, 0);
    // 如果是PNG图片，则canvas.toDataURL('image/png')
    eleLink.href = canvas.toDataURL('image/jpeg');
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

4. Вывод

не только.htmlдокумент,.txt, .jsonДругие текстовые файлы можно загрузить с помощью этой маленькой хитрости.

В браузере Chrome имитируйте щелчок по созданному<a>элемент, даже если нетappendНа страницу он также может инициировать загрузку, но не в браузере Firefox, поэтому приведенное вышеfunDownload()метод имеетappendChildа такжеremoveChildОбработка должна быть совместима с браузером Firefox.

downloadАтрибуты поддерживаются, начиная с Edge13, и загрузки могут запускаться в соответствии с одноранговыми тестами, но сгенерированные файлы именуются как GUID, и суффикс необходимо добавлять вручную.

Вот и все, спасибо за чтение!


Категории