當嘗試下載某些影片時，它會重定向到新的 URL，然後影片開始播放。未從伺服器收到'一次性內容類型”
P粉578343994
2023-08-28 09:24:28
<p>我想透過點擊下載某些影片。為此，我創建了一個按鈕並附加了一個應觸發相關影片下載的函數。
但我只能下載影片的鏈接，而無法下載影片。我可以使用外部下載器下載視頻，或者只需將 URL 拖到瀏覽器的下載部分。但無法透過 JavaScript 觸發該活動。請幫助我。</p>
<p>我嘗試了多種方法來解決這個問題：</p>
<ol>
<li>在沒有 Axios 的情況下使用簡單的 Blob 技術：</li>
</ol>
<pre class="brush:js;toolbar:false;">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)
</pre>
<p>端點：影片 URL 以 122 位元組的檔案形式下載</p>
<ol start="2">
<li>然後使用文件保護程式包：</li>
</ol>
<pre class="brush:js;toolbar:false;"> 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')
</pre>
<ol start="3">
<li>然後使用表單方法：</li>
</ol>
<pre class="brush:html;toolbar:false;"><form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
</pre>
<p>端點：影片開始在同一視窗中播放</p>
<ol start="4">
<li>使用 href 下載屬性：</li>
</ol>
<pre class="brush:js;toolbar:false;">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)
}</pre>
<p>端點：影片開始在同一視窗中播放</p>
<ol start="5">
<li>使用您的方法：</li>
</ol>
<pre class="brush:js;toolbar:false;">const link = document.createElement('a')
link.href = url
link.click()
</pre>
<p>端點：影片開始在同一視窗中播放</p>
<ol start="6">
<li>現在使用 Axios 預設值：</li>
</ol>
<pre class="brush:js;toolbar:false;"> axios.defaults.withCredentials = true
window.open(
'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman - 58142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68daf
)
</pre>
<p>端點：影片開始在新視窗中播放</p>
<ol start="7">
<li>使用 AXIOS 在標頭中附加一次性內容類型：</li>
</ol>
<pre class="brush:js;toolbar:false;"> axios
.get(
String(nuxtConfig.axios.mediaURL)
this.src_url.replace(
'https://redisrandom_url.com/videos/',
''
),
{
headers: {
mode: 'no-cors',
referrerPolicy: 'no-referrer',
'Content-Disposition': 'attachment; filename=Woman - 58142.mp4',
Host: 'redis-nfs',
'User-Agent': 'PostmanRuntime/7.29.2',
Accept: '*/*',
'Accept-Language': 'en-US,en;q=0.5',
'Accept-Encoding': 'gzip, deflate, br',
Connection: 'keep-alive',
Cookie:
'tk_or="https://www.google.com/"; tk_lr="https://www.google.com/"; _gcl_au=1.1.954672920.1660108804; _ga=GA1.2.1392122600.1660108808; .1970395787',
'Upgrade-Insecure-Requests': '1',
'Sec-Fetch-Dest': 'document',
'Sec-Fetch-Mode': 'navigate',
'Sec-Fetch-Site': 'none',
'Sec-Fetch-User': '?1',
Pragma: 'no-cache',
'Cache-Control': 'no-cache',
},
}
)
.then((response) => {
console.log(response)
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')
})
</pre>
<blockquote>
<p>端點：跨源請求被阻止：同源策略不允許讀取 redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/… 處的遠端資源。 （原因：CORS 標頭「Access-Control-Allow-Origin」遺失）。狀態碼：200</p>
</blockquote><p><br /></p>
我不使用 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 將檔案的位元組讀取到陣列中時，您的問題就解決了。