[前端]JavaScript 实现下载图片但不自动预览图片

发布日期:2022-05-17 10:34    点击次数:52

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

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

正文

进入正题:

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

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

就是创建一个a标签, 杭州凯骏电子科技有限公司然后设置href属性,然后设置download属性,最后点击。

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

解决方案重点来了

letresp=awaitfetch("https://test.com/test.jpg").catch(e=>{console.error(e)})if(!resp){return}leteleA=document.createElement('a')letblob=awaitresp.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,和这里的图片链接不大一样。

AAB