js工具函数之根据url地址下载

痛定思痛。 2023-02-16 05:47 39阅读 0赞

对于一些浏览器不支持打开的文件都好办些。能打开的包括 html文件，pdf和图片等要特殊处理

下载使用a标签。

**a标签下有一个download属性**

此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 `/` 和 `\` 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。

**注意:**

*  此属性仅适用于[同源 URL][URL]。
 *  尽管 HTTP URL 需要位于同一源中，但是可以使用 [`blob:` URL][blob_URL] 和 [`data:` URL][data_URL] ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。
 *  如果 HTTP 头中的 [Content-Disposition][] 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。
 *  如果 HTTP 头属性 `Content-Disposition` 被设置为inline（即 `Content-Disposition='inline'`），那么 Firefox 优先考虑 HTTP 头 `Content-Disposition`download 属性。

对于图片下载推荐

1.  PC端，使用 download 。
2.  移动端， 长按保存图片。

以下对于js下载文件类工具函数

其他情况都与后台的请求头有关，告知浏览器需要以什么格式是读取还是下载。后台的请求说了算。。除了前端设置外。后台的设置至关重要！！！

[URL]: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
[blob_URL]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL.createObjectURL
[data_URL]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
[Content-Disposition]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition