download 属性定义了下载链接的地址。
href 属性必须在 标签中指定。
download 属性同样可以指定下载文件的名称。文件名称没有限定值,浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。
function down() {
const image = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1112%2F032219114926%2F1Z322114926-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644485364&t=a6992072f49536a23f22f2943946684f'
//download(image, 'loadImg')
// download('./demo1.pdf', 'loadPdf')
download('./index.doc', 'loadRar')
};
/**
* @params {} 下载资源地址和文件名
*/
function download(url, name) {
console.log(/\//g.test(url))
// if(url && /\//g.test(url)) {
let a = document.createElement("a"); // 生成一个a元素
// let event = new MouseEvent("click");
a.download = name || "myload"; // 设置下载文件/图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.target="_blank"
a.click() // 创建一个单击事件
// }
}
浏览器能打开的文件(如图片、pdf),浏览器会直接打开,不能打开的文件(如doc文档),会直接下载。浏览器打开的文件,可以手动下载。对此,可以转换图片资源的路径,让浏览器不可直接解析。
- way1: 使用fetch获取blob
// fetch抓取图片数据
fetch(imageUrl).then(response => {
console.log(response)
if( response.status == 200 )
// 返回的.blob()为promise,然后生成了blob对象,此方法获得的blob对象包含了数据类型,十分方便
return response.blob()
throw new Error(`status: ${response.status}.`)
}).then(blob => {
// 获取到blob对象
downloadFile(blob, name)
}).catch(error=> {
console.log("failed. cause:", error)
})
// 设置a标签的路径
const src = URL.createObjectURL(blob);
a.href = src;
- way2: 将canvas保存成图片后下载
// canvas转图片
const imageUrl = canvas.toDataURL("image/png")
- way3: file-saver
<script>
import { saveAs } from 'file-saver';
...
// canvas转二进制之后调用
canvas.toBlob(function(blob) {
saveAs(blob, "image.png");
});
...
</script>