前端如何实现下载功能

在中后端项目中，前端处理的下载功能是常见的需求。
下载内容类型包括图片、Excel、CSV、MP4、PDF、TXT、JSON、HTML等，虽然内容不同，但下载原理大体相似。
下面介绍前端如何实现下载功能。
首先了解以下与下载密切相关的JavaScript对象：Blob、File、URL.createObjectURL、URL.revokeObjectURL。
Blob对象表示不可变原始数据的类文件对象，可以以文本或二进制格式读取或转换为ReadableStream进行数据操作。
Blob不一定代表原生JavaScript数据格式，文件接口继承了Blob功能并扩展了对用户系统文件的支持。
File对象提供文件信息并允许JavaScript访问其内容。
通常是用户选择文件后返回的FileList对象，或者拖放操作生成的DataTransfer对象，或者可以通过mozGetAsFile()API返回HTMLCanvasElement来返回。
文件对象是特殊的blob类型，可以在任何blob类型上下文中使用，例如：例如FileReader、URL.createObjectURL、createImageBitmap、XMLHttpRequest.send()等。
监听Input的change事件，获取FileList数组中的File对象。
静态方法URL.createObjectURL创建一个DOMString，如“blob:http://localhost:4200/0e40281d-92e9-40cf-af54-6193fb3a3f8c”。
它接受一个对象参数，用于创建URL的File对象、Blob对象或MediaSource对象。
每次调用createObjectURL()方法时，都会创建一个新的URL对象。
当不再需要这些URL对象时，必须通过调用URL.revokeObjectURL()方法释放每个对象。
Base64、atob、btoa是用于处理Base64编码和解码的函数。
btoa用于编码，atob用于解码。
但在某些情况下，调用window.btoa时可能会出现CharacterOutOfRange异常。
ArrayBuffer和Unit8Array是用于操作二进制数据的JavaScript工具。
具体概念可以在MDN中找到。
Blob、File、Base64和ArrayBuffer可以相互转换。
通常，当我们收到图像或其他文件时，它们可能不是所需的格式。
我们可以使用以下方法将它们相互转换。
同源（域）和跨域必须明确。
由于浏览器源策略的原因，无法仅处理来自前端的跨域下载。
有些方法，比如动态创建iframe或者form表单，手动触发submit方法，可以实现跨域下载，但是需要后台的配合（CORS、Content-Type和Content-Disposition）。
前端下载（同源）主要使用A标签。
HTML5在A标签上有一个download属性，它告诉浏览器下载href而不是导航到它。
该属性仅支持同源URL。
前端下载（跨域）通常需要与后端协作。
实现方式有两种：用iframe或者form。
npm库建议阅读对应的仓库源码，代码精简，实现简单。
结论：以上就是前端下载的全部内容。
内容不多，希望如此会对大家有所帮助。

浏览器的左下角_javascript:blogutildownload()是什么意思，不能下载？

目前的javascript代码只写在a中，一般浏览器都会在状态栏显示href属性。