前端实现图片下载

MingjunYang 发布于2019-08-22 10:54 / 1637人阅读

摘要：测试说明位位位位服务端实现下载通过修改响应头，告诉浏览器这个请求回来的是个附件。控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。

测试说明

Chrome 65.0.3325.181 (64 位)

Chrome 69.0.3497.92 (64 位)

IE 11.0.9600.19002 (64 位)

Firefox 61.0.1 (64 位)

服务端实现下载

通过修改 HTTP 响应头，告诉浏览器这个请求回来的是个附件。以七牛为例子：

这里需要注意两处：

Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。

Access-Control-Allow-Origin 跨域资源共享设置

前端方案 通过的 download 属性

下载图片

抛开浏览器兼容性，还有几点限制：

href 所指向的地址，必须与当前网站同源，否则

chrome 65.0.3325.181 下测试，只能下载不能改名

chrome 69.0.3497.92 中已经严格遵循同源策略的限制，如果加载了非同源的内容，download 属性将失效，等效导航功能。

Firefox 61.0.1同上

其它限制

通过 js 动态创建并设置 download 属性

原理和限制同上，代码如下：（不支持IE）

function download(url, name) {
    const aLink = document.createElement("a")
    aLink.download = name 
    aLink.href = url 
    aLink.dispatchEvent(new MouseEvent("click", {}))
}

以导出 canvas 图片为例：

const canvas = document.getElementById("canvas")
download(canvas.toDataURL("image/png"), "name.png")

通过 js 创建

网上有很多文章都提到这个方案，但是这里不推荐：

document.execCommand("SaveAs") 中 SaveAs 是个非标准值，主要用来兼容 ie 不支持标签 download 属性的场景

window.frames["iframeName"].document 受到同源策略的影响，如果图片地址跨域，是无法访问的的属性和方法

参考

header中Content-Disposition的作用与使用方法

Does execCommand SaveAs work in Firefox?

在浏览器端用JS创建和下载文件 In JavaScript on 2014年01月03日

How to clone or re-dispatch DOM events?

GPU云服务器云服务器前端实现前端实现websocket即时通信前端下载实现图片上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91416.html

node实现文件下载不得不说的那些事儿

摘要：如果像本例中这样的场景会遇到这样一个问题，详见链接当请求参数过长或为了安全，就需要用到下载。写到这里自己都忍不住想锤自己，给自己挖坑不说，这样来回请求下载，流量，真的是败家。这几天一直在做远程文件下载的事，现在总算有了解决，特来记录一下踩过的坑和想揍自己的心需求应用场景是这样的，底层逻辑数据请求接口是由Java写的，也就是说原始文件存在Java服务端,返回时有加密措施由于工作...

Coly 2019-08-23 14:12 评论0 收藏0
前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度

摘要：前端最基础的就是。一个朋友的问题，监测下载进度。这节主要是讲如何使用，以及前端下载的核心操作。下载文件，并显示进度条。下载文件，并显示进度条下载文件上面已经实现了，那我们先说说如何显示进度条。实现代码如下，我们操作成读流，然后统计长度。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（H...

sPeng 2019-08-26 13:58 评论0 收藏0
前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度

摘要：前端最基础的就是。一个朋友的问题，监测下载进度。这节主要是讲如何使用，以及前端下载的核心操作。下载文件，并显示进度条。下载文件，并显示进度条下载文件上面已经实现了，那我们先说说如何显示进度条。实现代码如下，我们操作成读流，然后统计长度。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（H...

freecode 2019-08-02 15:11 评论0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵，如果喜欢，点个开源不易。作者将原素材文章进行了新内容的添加和重新排列，但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧，来提升你的和代码。收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

ermaoL 2019-08-29 13:03 评论0 收藏0