So legen Sie die Download-Dateierweiterung für Blobdaten fest

Lesezeit: 2 Minuten

Benutzer-Avatar
LF00

Verwenden Sie in meinem Website-Video die Blob-Daten. Wenn das Video heruntergeladen wurde, ist der gespeicherte Dateiname der Blob-Name mit .txt(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.txt)-Erweiterung im Chrome-Browser, während sie in Firefox mit ist .mp4(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.mp4) Verlängerung.

Wie kann ich die Download-Dateierweiterung und den Dateinamen angeben.

Ich habe versucht, es mit dem folgenden Code einzustellen, aber keiner funktioniert.

    type="video/mp4"
    filename="111.mp4"
    download="111.mp4"

Hier ist der Beispielcode, den ich jetzt verwende.

<video 
    width="300px"
    id="video"
    type="video/mp4"
    filename="111.mp4"
    download="111.mp4"
    controls=""
    src="blob:http://localhost/4671addc-3ce0-4eb6-b414-ddf3406b1fe5">
</video>

  • Verwenden Sie die download für data uri funktioniert die Frage Gibt es eine Möglichkeit, einen vorgeschlagenen Dateinamen anzugeben, wenn data: URI verwendet wird? zeigt an. Aber funktioniert hier nicht für den Blob-Uri.

    – LF00

    31. März um 4:07 Uhr

  • Lösung in Wie setze ich den Namen einer vom Browser heruntergeladenen Datei? geht hier auch nicht.

    – LF00

    31. März um 6:21 Uhr

  • Wie ändere ich das Download-Ereignis der internen Mediensteuerung des Video-Tags?

    – LF00

    7. April um 10:41 Uhr

mit HTML5 download Attribut herunterladen blob URL-Datei

<section>
  <img id="img" />
  <a id="img-link" download>...loading</a>
</section>
// ES5
function generatorBlobVideo(url, type, dom, link) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType="arraybuffer";
  xhr.onload = function(res) {
    var blob = new Blob(
      [xhr.response],
      {'type' : type},
    );
    var urlBlob = URL.createObjectURL(blob);
    // render `blob` url ✅
    dom.src = urlBlob;
    // using `a` tag download ✅
    link.href = urlBlob;
    link.innerText = urlBlob;
    link.download = filename;
  };
  xhr.send();
}

(function() {
  var type="image/png";
  var url="https://cdn.xgqfrms.xyz/logo/icon.png";
  var dom = document.querySelector('#img');
  var link = document.querySelector('#img-link');
  var arr = url.split("https://stackoverflow.com/");
  var filename = arr[arr.length - 1] || 'default-filename';
  generatorBlobVideo(url, type, dom, link, filename);
})();

Live-Demo

https://codepen.io/xgqfrms/full/YzYRLwg

Screenshots

Geben Sie hier die Bildbeschreibung ein
Geben Sie hier die Bildbeschreibung ein

1005900cookie-checkSo legen Sie die Download-Dateierweiterung für Blobdaten fest

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy