js通过按钮下载图片到本地的代码

2021-03-23 20:43| 发布者: 常德卧首软件| 查看:

您现在的位置: 主页 > 产品中心 > 网站建设 >


以下为代码展示:

            <div class="content" style="margin-bottom:2.1rem;">
            <img id="haibao" style="width: 100%;height: 100%;" src="http://">
            </div>
            
            <!--下载图片开始-->
            <div>
            <button style="position:absolute;background: #ff7443;border-color: #ff7443;border: 0;color: #fff;padding: 5px 15px;" type="button" onclick="downloadImg()">下载海报</button>
                
            </div>
            <script>
                function downloadImg(){
                    var img = document.getElementById('haibao'); // 获取要下载的图片
                    var url = img.src;                            // 获取图片地址
                    var a = document.createElement('a');          // 创建一个a节点插入的document
                    var event = new MouseEvent('click')           // 模拟鼠标click点击事件
                    a.download = 'haibao_download'                  // 设置a节点的download属性值
                    a.href = url;                                 // 将图片的src赋值给a节点的href
                    a.dispatchEvent(event)                        // 触发鼠标点击事件
                 }
            </script>
            <!--下载图片结束-->

原理:

通过JS来触发<a>链接来实现图片下载,1、给img指定一个id,添加一个button新增一个点击事件,然后执行js代码。
下一篇:php生成文件|php远程下载文件到本地代码 上一篇:jquery.js的api调用常用接口|在线引用地址
常德卧首工作室专业从事常德网站建设、常德网站制作、常德网站设计、常德网站托管维护、常德软件开发、常德网络推广等相关业务。我们是一支年轻的队伍,知识强,实战经验丰富,客户案例众多。自工作室成立以来,我们以质量求生存,以服务求发展,使客户得到称心满意的一条龙服务 。欢迎来电咨询:18182139521

联系我们

常德市武陵区柏子园社区旁

19976862850(服务时间:08:00-22:00)

woshou365@0736sx.com

在线咨询 官方微信官方微信

部门热线

前   台:19976862850
业务部:19976862850
客服部:19976862850
技术部:13387420034
人事部:13387420034

网站建设 微信开发 售后服务 咨询电话19976862850 返回顶部
返回顶部