Предлагать имя файла, когда пользователь сохраняет большой двоичный объект с помощью showSaveFilePicker

Не уверен, глупо ли спрашивать, но ничего не нашел в Интернете:

Пользователи моего сайта могут сохранять файл на свой диск:

      const saveFile = async blob => {
    try {
      const handle = await window.showSaveFilePicker({
        types: [
          {
            description: "Mp3 file",
            accept: { "audio/mp3": [".mp3"] },
          },
        ],
      })
      const writable = await handle.createWritable()
      await writable.write(blob)
      await writable.close()
      return handle
    } catch (err) {
      console.error(err.name, err.message)
    }
  }

Как видите, этот файл находится не на каком-либо сервере, а исходит от большого двоичного объекта. Он работает нормально, но я хотел бы предложить имя файла получше, чем просто Untitled.mp3, так что в идеале пользователю нужно просто нажать клавишу возврата, и ему не нужно беспокоиться о названии файла (но он мог бы сделать это, если бы захотел).

Это вообще возможно?

Я смотрел на то и это, но не нашел ничего полезного!

Я знаю, что в Chrome 91 я могу:

      const handle = await self.showSaveFilePicker({
  suggestedName: 'song.mp3',
  types: [{
    description: 'Mp3 file',
    accept: {
      'audio/mp3': ['.mp3'],
    },
  }],
});
  • но разве нет чего-то, что могло бы работать с другими браузерами, а также с более старыми версиями Chrome?
Источник

1 ответ

Начиная с Chrome 91 вы можете использовать suggestedName, как описано в нашей статье. К сожалению, этот параметр не поддерживается в версии Chrome старше 91.

      const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Альтернатива 1

Для <a download="suggested_name.txt" href="blob:…"> обходной путь, имя файла берется из downloadзначение атрибута, как в указанодокументации .

Альтернатива 2

Если вы хотите (или можете) задействовать сервер, вы можете использовать Content-Dispositionзаголовок, как указано на MDN.

      200 OK
Content-Type: text/html; charset=utf-8
Content-Disposition: attachment; filename="cool.html"
Content-Length: 21

<HTML>Save me!</HTML>
Источник
Другие вопросы по тегам