241. 【前端】JavaScript-实现下载图片但不自动预览图片

最新推荐文章于 2023-10-17 17:57:32 发布

原创最新推荐文章于 2023-10-17 17:57:32 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

前端专栏收录该内容

7 篇文章

订阅专栏

文章讲述了如何使用JavaScript实现从网络下载图片并保存到本地，而不是在浏览器中预览。首先通过fetch获取图片数据，然后转换为blob，再利用URL.createObjectURL创建一个可下载的链接，最后设置a标签的href和download属性，模拟点击实现图片下载。

之前完成过一个需求：“JavaScript 实现导出网页中的一个模块为一张图片”。

当时是通过 canvas 实现的，导出图片的效果也非常好，是我们客户在举办线下会议时做广告机的广告图用的。一张广告图可能很好做，美工手动完成一下也不费劲，但如果广告图里的数据全部来自数据库，图片也存在网络上呢？（我要解决的就是这个问题，根据动态数据实现网页自动排版并导出图片）

进入正题：

今天同样是在做一个图片下载功能，其实代码很少，

 let eleA = document.createElement('a')
 eleA.href = "https://test.com/test.jpg"
 eleA.download = "test.jpg"
 eleA.click()

就是创建一个 a标签，然后设置 href属性，然后设置 download属性，最后点击。

可惜，最后效果不如愿，因为在谷歌浏览器里，它老师新开一个页面，直接预览图片。我需要做的是下载到本地，并保存成我设置的名字。

解决方案重点来了

 let resp = await fetch( "https://test.com/test.jpg").catch(e => {
	 console.error(e)
 })
 if (!resp) {
	 return
 }
 let eleA = document.createElement('a')
 let blob = await resp.blob().catch(e => {
	 console.log(e)
 })
if(!blob) {
        return
}
 eleA.href = URL.createObjectURL(blob)
 eleA.download = "test.jpg"

 eleA.click()

步骤基本不变，变化的地方在于 href属性的设置，这里是先通过 fetch下载数据到本地，然后使用 URL.createObjectURL(blob)作为 href属性的值。

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象。

新的代码，可以实现下载图片但不自动预览图片了，完事。

**PS：最开始说的那个需求里，实际上已经做到了不自动预览图片，但那里的图片源是来自 canvas，和这里的图片链接不大一样。