僅使用 HTML 是不可能的。我需要使用回呼函式進行下載,但它不起作用。
我需要用如下元素封裝按鈕:
<a href="https://path.to.your.file.com" target="_blank" rel="noreferrer">
<button>Click</button>
</a>
我需要創建一個回呼函式:
const downloadImage = ( dataURL: string, fileName: string ) => {
const link = document.createElement('a')
link.download = fileName
link.href = dataURL
link.click()
}
回傳:
<button className="btn btn-primary btn-sm" onClick={() => downloadImage('https://estica-public.s3.amazonaws.com/21965/conversions/8b3ujv9ze8d0uho287bq182zgpvv-full.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAY2EWNM3MQCGRS66O/20221111/us-east-1/s3/aws4_request&X-Amz-Date=20221111T135108Z&X-Amz-SignedHeaders=host&X-Amz-Expires=3600&X-Amz-Signature=9e11f9af9fc1ba81f3100a2da6d29a6fd71e3b5a7a9e5b7682dc5171530b251a', 'image.png')} >Baixar arte gráfica</button>
我嘗試了 html 方法,使用實驗室,但我真的需要讓這段代碼作業,有人可以幫助我嗎?我已經在 Stack Overflow 上嘗試了所有方法,所以我把我用來強制下載的方法和我必須嵌入我的專案的鏈接放在一起。
uj5u.com熱心網友回復:
function downloadImage(url, name = 'newImage') {
return fetch(url)
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
return Promise.resolve();
})
}
function download() {
downloadImage('https://picsum.photos/536/354', 'newFileName')
.then(() => console.log('ok'))
.catch(() => console.log('error'))
}
<div onClick="download()">download click</div>
uj5u.com熱心網友回復:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/download
看看那個檔案。那里解釋了一切。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/534981.html
