Beim Versuch, einige Videos herunterzuladen, wird auf eine neue URL umgeleitet und das Video wird abgespielt. „Einweginhaltstyp“ wurde nicht vom Server empfangen

Question

Ich möchte bestimmte Videos mit einem Klick herunterladen. Dazu habe ich einen Button erstellt und eine Funktion angehängt, die den Download des entsprechenden Videos auslösen soll. Ich kann aber nur den Link des Videos herunterladen, nicht das Video. Ich kann das Video mit einem externen Downloader herunterladen oder einfach die URL in den Download-Bereich des Browsers ziehen. Die Aktivität kann jedoch nicht über JavaScript ausgelöst werden. Bitte hilf mir.

Ich habe mehrere Möglichkeiten ausprobiert, um dieses Problem zu lösen:

1. Einfache Blob-Technologie ohne Axios nutzen:

const blob = new Blob([this.src_url], { type: 'video/mp4' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = this.src_url.replace(
>! // 'https://redis-test.com/videos/',


link.click()
URL.revokeObjectURL(link.href)

Endpunkt: Die Video-URL wird als 122-Byte-Datei heruntergeladen

2. Dann verwenden Sie das Dateischutzpaket:

 var FileSaver = require('file-saver')
    console.log(this.src_url)
    var blob = new Blob([this.src_url], { type: 'video/mp4' })
    FileSaver.saveAs(blob, 'hello world.mp4')

3. Dann verwenden Sie die Formularmethode:

<form method="get" action="file.doc">
   <button type="submit">Herunterladen!</button>
</form>

Endpunkt: Die Videowiedergabe beginnt im selben Fenster

4. Verwenden Sie das href-Download-Attribut:

function download(url) {
  const a = document.createElement('a')
  a.href = URL
  a.download = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

Endpunkt: Die Videowiedergabe beginnt im selben Fenster

5. Verwenden Sie Ihre Methode:

const link = document.createElement('a')
link.href = URL
link.click()

Endpunkt: Die Videowiedergabe beginnt im selben Fenster

6. Verwendet jetzt den Axios-Standard:

 axios.defaults.withCredentials = true
     window.open(
       „https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&download“
     )

Endpunkt: Video wird in neuem Fenster abgespielt

7. Verwenden Sie AXIOS, um einen einmaligen Inhaltstyp im Header anzuhängen:

       .erhalten(
         String(nuxtConfig.axios.mediaURL) +
           this.src_url.replace(
             „https://redisrandom_url.com/videos/“,
             ''
           ),
         {
           Überschriften: {
             Modus: 'no-cors',
             referrerPolicy: 'no-referrer',
             'Content-Disposition': 'attachment; filename=Frau - 58142.mp4',
             Host: 'redis-nfs',
             'User-Agent': 'PostmanRuntime/7.29.2',
             Akzeptieren: '*/*',
             'Accept-Language': 'en-US,en;q=0.5',
             'Accept-Encoding': 'gzip, deflate, br',
             Verbindung: 'Keep-Alive',
             Kekse:
               'tk_or=%22https%3A%2F%2Fwww.google.com%2F%22; tk_lr=%22https%3A%2F%2Fwww.google.com%2F%22; _ga=GA1.2.1392122600 .1660108808; _fbp=fb.1.1660108809200.1970395787',
             'Upgrade-Insecure-Requests': '1',
             'Sec-Fetch-Dest': 'Dokument',
             'Sec-Fetch-Mode': 'navigate',
             'Sec-Fetch-Site': 'none',
             'Sec-Fetch-User': '?1',
             Pragma: 'kein Cache',
             'Cache-Control': 'no-cache',
           },
         }
       )
       .then((response) => {
         console.log(Antwort)

         const url = window.URL.createObjectURL(new Blob([response.data]))
         const link = document.createElement('a')
         link.href = URL
         link.setAttribute('download', 'title')
         document.body.appendChild(link)
         link.click()
       })
       .catch((error) => {
         console.log('rex')
       })

Endpunkt: Cross-Origin-Anfrage blockiert: Die Same-Origin-Richtlinie erlaubt kein Lesen der Remote-Ressource unter redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/…. (Ursache: CORS-Header „Access-Control-Allow-Origin“ fehlt). Statuscode: 200

Answer 1

我不使用 VueJS，但我怀疑 this.src_url 只是视频 URL 路径的文本。

在 HTML5 中，您只能下载服务器上存在的文件。如果文件是外部的，那么您需要一个 PHP 脚本（与您的 HTML 文件在同一服务器上）将这些外部字节读回到您的 JS 缓冲区数组中。

const blob = new Blob([this.src_url], { type: 'video/mp4' })

应该是：

let myBytes = //# update variable with data result of reading files bytes
let myBlob = new Blob(  [ Uint8Array.from( myBytes ) ] , {type: "application/octet-stream"} );

可以使用 FileReader API 或 Fetch API 完成字节读取。

当您可以使用 VueJS 将文件的字节读取到数组中时，您的问题就解决了。