开发工具控制台中的 javascript 可以下载/保存文件，还是沙盒化？

Posted 2023-03-07

【中文标题】开发工具控制台中的 javascript 可以下载/保存文件，还是沙盒化？

【英文标题】：Can javascript in the dev tools console download/save files, or is this sandboxed?

【发布时间】：2015-10-19 21:59:31

【问题描述】：

我正在尝试编写一个类似书签的 js sn-p，它可以从开发人员工具控制台运行，它将为页面中的图像提供 src：

var x = ["PA633", "PA10", "PA11"];
function nextPage(i) 
    $('#viewport div:first-child').animate(scrollTop: i, 200);
    i+=1020;
    if (i < 20000)  setTimeout(nextPage, 200, i); 
    for (index = 0; index < $('div.pageImageDisplay img').length; ++index) 
        var page = /&pg=([A-Z]2,3\d+)&/.exec($('div.pageImageDisplay img')[index].src);
        if ($.inArray(page[1], x) != -1) 
            x.splice(x.indexOf(page[1]), 1);
            var embiggen = $('div.pageImageDisplay img')[index].src.replace(/&w=\d+$/, "&w=1200");
            console.log(embiggen);
        
    

此脚本的工作原理是它为每个图像提供正确的 src 链接。有没有办法让javascript自动下载/保存每个链接？可以单击每个链接（Chrome 在新选项卡中打开这些链接），但这样做有点乏味。

正确的做法是让 javascript sn-p 将图像保存到下载文件夹本身，但我有一个模糊的概念，这是不可能的。有可能吗？如果有，如何实现？

请注意，此 javascript 不会直接包含在网页中，而是专门用于从开发工具控制台运行。

【参考方案1】：

这需要几个不同的部分才能工作。首先，有必要向页面添加（除非您可以重复使用现有的）链接，如下所示：

$("body").append($("<a id='xyz'/>"));

然后，您需要将链接的href设置为要下载的文件的链接：

$('#xyz').attr("download", page[1] + ".png");
$('#xyz').attr("href", embiggen);

请注意，我们也可以（至少在 Chrome 中）通过下载属性自动设置文件名。

最后，JavaScript 可以通过以下方式向锚标记本身发出点击事件：

$('#xyz')[0].click();

当它运行时，它会自动下载文件。设置文件名似乎也可以防止它弹出文件对话框。

【参考方案2】：

$("body").append($("<a id='xyz'/>"));

上面的代码在某些版本的 Chrome 中给了我以下错误：

VM42:1 Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': '<a id='xyz'/>' is not a valid selector. at <anonymous>:1:18

请尝试以下代码，使用普通的旧 Javascript。

var url = 'your url goes here';
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
document.body.appendChild(elem);
$('#downloadAnchor').click();

详细说明可以查看this answer。

【讨论】：

太好了，谢谢！我发现我需要将最后一行更改为$('#downloadAnchor')[0].click(); 才能工作。