Angular 按一下按钮，下载文件

使用HTML5，我们可以使用下载来下载文件

---

在Angular中，单击按钮时如何从特定的已知位置下载文件

尝试将实际文件路径设置为href，将文件名设置为download属性

<a target="_self" href="pathOfFile" download="nameofFile">

---

如果您需要保存比blob大小限制更大的文件，或者没有足够的RAM，那么请查看更高级的StreamSaver.js，它可以使用新的streams API将数据直接异步保存到硬盘驱动器。这将支持进程、取消和知道何时完成编写

FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的web应用程序，但是如果文件来自服务器，我们建议您首先尝试使用Content Disposition attachment response header，因为它具有更大的跨浏览器兼容性

正在查找canvas.toBlob（）以保存画布？查看canvas-toBlob.js以了解跨浏览器实现

支持的浏览器 浏览器构造为文件名最大Blob大小依赖项

特征检测是可能的：

try {
    var isFileSaverSupported = !!new Blob;
} catch (e) {}

IE<10 可以在IE<10中保存文本文件，而无需基于Flash的多边形填充。有关更多详细信息，请参阅ChenWenBrian和koffsyrup的saveTextAs（）

Safari 6.1+ Blob可能会被打开而不是保存，有时您可能需要指示Safari用户手动按⌘+S以在文件打开后保存该文件。使用application/octet stream MIME类型强制下载可能会导致Safari出现问题

iOS saveAs必须在用户交互事件（如onTouchDown或onClick）中运行；setTimeout将阻止saveAs触发。由于iOS saveAs中的限制会在新窗口中打开而不是下载，如果您想要修复此问题，请告诉苹果此WebKit错误对您的影响

语法 从文件保护程序导入saveAs（）

import { saveAs } from 'file-saver';

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

如果希望FileSaver.js自动提供Unicode文本编码提示（请参阅：字节顺序标记），请传递

{autoBom:true}

。请注意，只有当blob类型具有charset=utf-8 set时，才可以执行此操作

示例 使用

require（）

保存文本

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保存URL

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

在同一来源中使用URL只需使用[下载]。否则，它将首先检查是否支持带有同步头请求的cors头。如果有，它将下载数据并使用blob URL保存。如果没有，它将尝试使用[download]下载它

标准W3C文件API Blob接口并非在所有浏览器中都可用。js是解决这个问题的跨浏览器Blob实现

保存画布

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

注意：标准HTML5 canvas.toBlob（）方法并非在所有浏览器中都可用。canvas-toBlob.js是一个跨浏览器的canvas.toBlob（）文件，用于填充该文件

保存文件 可以保存文件构造函数而不指定文件名。如果文件本身已经包含一个名称，那么有很多方法可以获取文件实例（从存储、文件输入、新构造函数、剪贴板事件）。如果仍要更改名称，则可以在第2个参数中进行更改

// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);

安装

# Basic Node.JS installation
npm install file-saver --save
bower install file-saver

此外，可以通过以下方式安装TypeScript定义：

# Additional typescript definitions
npm install @types/file-saver --save-dev

---

您还可以在angular中使用

下载

属性，或者安装npm包，如。