前端 javascript 实现文件下载的示例
5星 · 超过95%的资源 31 浏览量
2021-01-21
10:52:53
上传
评论
收藏 72KB PDF 举报 
前端前端 javascript 实现文件下载的示例实现文件下载的示例
在 html5 中，a 标签新增了 download 属性，包含该属性的链接被点击时，浏览器会以下载文件方式下载 href 属性上的链接。
示例：
<a href="https://www.baidu.com" rel="external nofollow" download="baidu.html">下载</a>
1. 前端前端 js 下载实现与示例下载实现与示例
通过 javascript 动态创建一个包含 download 属性的 a 元素，再触发点击事件，即可实现前端下载。
代码示例：
function download(href, title) {
const a = document.createElement('a');
a.setAttribute('href', href);
a.setAttribute('download', title);
a.click();
}
说明：
href 属性设置要下载的文件地址。这个地址支持多种方式的格式，因此可以实现丰富的下载方法。
download 属性设置了下载文件的名称。但 href 属性为普通链接并且跨域时，该属性值设置多数情况下会被浏览器忽略。
1.1 普通连接下载示例
// 下载图片
download('http://huoche.7234.cn/images/jb51/gpgl4nuwwai.gif', 'lzwme-gravatar');
// 下载一个连接
download('https://lzw.me', 'lzwme-index.html');
1.2 href 为 data URIs 示例
data URI 是前缀为 data:scheme 的 URL，允许内容创建者在文档中嵌入小文件。数据URI由四个部分组成：前缀（数据:)，
指示数据类型的MIME类型，如果非文本则为可选的base64令牌，数据本身：
data:[<mediatype>][;base64],<data>
链接的 href 属性为 data URIs 时，也可以实现文件内容的下载。示例：
download('data:,Hello%2C%20World!', 'data-uris.txt');
download('data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D', 'data-uris.txt');
1.3 canvas 下载示例
对于 canvas 可以通过 toDataURL 方法取得 data URIs 格式的内容。
1.4 二进制内容下载
URL.createObjectURL 方法会根据传入的参数创建一个指向该参数对象的 URL。新的对象 URL 指向执行的 File 对象或者是
Blob 对象。
URL.createObjectURL 的参数是 File 对象或者 Blob 对象，File 对象也就是通过 input[type=file] 选择的文件，Blob 对象是二进
制数据。
将URL.createObjectURL 返回值设为 href 属性的值，即可实现二进制内容下载。示例：
const content = 'Welcome to lzw.me!';
const blob = new Blob([content]);
const href = URL.createObjectURL(blob);
download(href, 'download-text.txt');
URL.revokeObjectURL(href);
1.5 前端下载方法示例
综合上述讨论，这里给出一个前端实现下载的 saveAs 方法的 TypeScript 示例：
/**
* 通过创建 a dom 对象方式实现前端文件下载
* @param href 要下载的内容链接。当定义了 toBlob 时，可以为纯文本或二进制数据(取决于 toBlob 格式
* @param fileName 下载后的文件名称
- 1
- 2
前往页