上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-10-20 10:12:09 | 显示全部楼层 | 阅读模式

    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以获得跨浏览器的实现。

    本文由陈吟翻译

    检测浏览器是否支持

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

    IE < 10

    对于IE版本10以下的浏览器,也是可以无需基于Flash-based 的polyfills来保存文件。详细信息请参考ChenWenBrian and koffsyrup's saveTextAs()

    Safari 6.1+

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

    支持的浏览器

    注意有最大blob尺寸的限制

    图片.png

    例子

    保存文本

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

    保存图片

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

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

    保存Canvas

    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 构造函数。如果文件本身已经包含一个名称,我们有很多方法可以获取文件实例(从存储、文件输入、新构造函数、剪贴板事件)。如果您仍想更改名称,可以在第二个参数中更改它。

    // 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

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

    库的编译代码不多

    可以自己看一下玩玩

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-10-20 10:15:56 | 显示全部楼层
    // ==UserScript==
    // @name         FileSaver测试
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try 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);
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    回帖

    3

    积分

    助理工程师

    积分
    3
    发表于 2024-3-14 21:59:57 | 显示全部楼层
    楼主你好,我用油猴使用filesaver,点击按钮后无反应。相同的浏览器相同的代码,我在浏览器窗口点击是正常的。请问是为什么?是因为油猴被安全限制了吗?希望得到你的帮助和解答。谢谢你!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    开个新帖贴上来代码例子看看
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    回帖

    3

    积分

    助理工程师

    积分
    3
    发表于 2024-3-15 13:10:50 | 显示全部楼层
    李恒道 发表于 2024-3-14 23:07
    开个新帖贴上来代码例子看看

    楼主你好,我经过新开一个脚本,发现是正常的。就一句一句检查到底哪里出了问题,最后找到问题原因在于这句:“// @grant        none”,none不能不填

    操作无反应时:
    // @grant

    正常时:
    // @grant        none


    谢谢你!
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    回帖

    3

    积分

    助理工程师

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

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

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

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

    关于引入问题可以多参考指南的魔改例子和分析
    时间长就会调了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表