论坛 › 脚本开发 › [油猴脚本开发指南]filesaver解决前端下载

李恒道 发表于 2021-10-20 10:12:09

[油猴脚本开发指南]filesaver解决前端下载

# **FileSaver.js**

FileSaver.js是一个用于在客户端保存文件的解决方案，它适用于需要在本地生成文件的web、app。需要提示的是，对于服务器端发送的文件，为了更好的跨浏览器兼容，我们建议你先添加 **[**Content-Disposition**](https://github.com/eligrey/FileSaver.js/wiki/Saving-a-remote-file#using-http-header)** 响应头。

寻找`canvas.toBlob()`保存画布？查看 [**canvas-toBlob.js**](https://github.com/eligrey/canvas-toBlob.js)以获得跨浏览器的实现。

本文由陈吟翻译

### **检测浏览器是否支持**

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

### **IE < 10**

对于IE版本10以下的浏览器，也是可以无需基于Flash-based 的polyfills来保存文件。详细信息请参考[**ChenWenBrian and koffsyrup's **`saveTextAs()`](https://github.com/koffsyrup/FileSaver.js#examples)

### **Safari 6.1+**

Blob 有时可能会被打开而不是保存——您可能需要指导您的 Safari 用户在打开文件后手动按⌘+S来保存文件。使用application/octet-stream`MIME 类型强制下载[**可能会导致 Safari 出现问题**](https://github.com/eligrey/FileSaver.js/issues/12#issuecomment-47247096)**。**

# 支持的浏览器

注意有最大blob尺寸的限制


# 例子

保存文本

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

保存图片

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

在同一来源的地址中将会只使用 **`a`**，除此之外，它将检查是否支持带有同步头请求的 cors 头。如果支持，那么它将下载数据并使用 blob URL 进行保存。如果不支持，那么它会尝试使用**`a`下载。

# 保存Canvas

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

注意:并不是所有的浏览器都支持标准的HTML5的 **`canvas.toBlob()`** 方法。**[**canvas-toBlob.js**](https://github.com/eligrey/canvas-toBlob.js)** 是一个跨浏览器 的`canvas.toBlob()`**。**

# 保存文件

你可以在不指定文件名的情况下保存 File 构造函数。如果文件本身已经包含一个名称，我们有很多方法可以获取文件实例（从存储、文件输入、新构造函数、剪贴板事件）。如果您仍想更改名称，可以在第二个参数中更改它。

```javascript
// 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"});
saveAs(file);
```

# 结语

那么这节课我们就了解filesaver

实际会用基础就好了，不会可以再查文档

库的编译代码不多

可以自己看一下玩玩

李恒道 发表于 2021-10-20 10:15:56

```javascript
// ==UserScript==
// @name         FileSaver测试
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptiontry to take over the world!
// @author       You
// @match      https://bbs.tampermonkey.net.cn/forum.php
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @require      https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/filesaver.js
// @grant      unsafeWindow
// ==/UserScript==

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

txwh171162612 发表于 2024-3-14 21:59:57

楼主你好，我用油猴使用filesaver，点击按钮后无反应。相同的浏览器相同的代码，我在浏览器窗口点击是正常的。请问是为什么？是因为油猴被安全限制了吗？希望得到你的帮助和解答。谢谢你！

李恒道 发表于 2024-3-14 23:07:43

txwh171162612 发表于 2024-3-14 21:59
楼主你好，我用油猴使用filesaver，点击按钮后无反应。相同的浏览器相同的代码，我在浏览器窗口点击是正常 ...

开个新帖贴上来代码例子看看

txwh171162612 发表于 2024-3-15 13:10:50

李恒道 发表于 2024-3-14 23:07
开个新帖贴上来代码例子看看
楼主你好，我经过新开一个脚本，发现是正常的。就一句一句检查到底哪里出了问题，最后找到问题原因在于这句：“// @grant      none”，none不能不填

操作无反应时：
// @grant

正常时：
// @grant      none


谢谢你！

txwh171162612 发表于 2024-3-15 13:21:53

txwh171162612 发表于 2024-3-15 13:10
楼主你好，我经过新开一个脚本，发现是正常的。就一句一句检查到底哪里出了问题，最后找到问题原因在于这 ...

而且想起昨天的细节，刚才尝试了一下，也不能删除“// @grant      ”，删除后使用FILESAVE也是不正常的。而碰巧我的其它代码又都是正常的，所以一直找来找去，找不到问题所在。

李恒道 发表于 2024-3-15 16:59:16

txwh171162612 发表于 2024-3-15 13:21
而且想起昨天的细节，刚才尝试了一下，也不能删除“// @grant      ”，删除后使用FILESAVE也是不正常 ...

关于引入问题可以多参考指南的魔改例子和分析
时间长就会调了

查看完整版本: [油猴脚本开发指南]filesaver解决前端下载