简体   繁体   English

(Javascript)如何使用iframe强制下载图片?

[英](Javascript) How to force the download of an image using iframe?

My requirement is to select a bunch of images and download them all, all at the same time. 我的要求是选择一堆图像并同时下载所有图像。

I'm using this library ( https://github.com/biesiad/multiDownload ) that works pretty well with other files than iamges. 我正在使用该库( https://github.com/biesiad/multiDownload ),该库与iamges之外的其他文件都可以很好地工作。 When it is image, it doesn't work. 当它是图像时,它将不起作用。

My conclusions is that the browser perceives images differently from other binary files. 我的结论是,浏览器对图像的感知不同于其他二进制文件。

I've checked on Google Chrome and all the files that work using that plugin, they are cancelled (developer tools > network) but the images aren't. 我已经检查了Google Chrome浏览器和使用该插件的所有文件,但这些文件都被取消了(开发人员工具>网络),但是图像却没有。

Is there any way to tell browser that it's a binary like all the other files? 有没有办法告诉浏览器它和其他文件一样是二进制文件? Is there any way? 有什么办法吗?

Many thanks 非常感谢


The function is implemented like that: 该函数是这样实现的:

var methods = {
    _download: function (options) {
        var triggerDelay = (options && options.delay) || 100;
        var cleaningDelay = (options && options.cleaningDelay) || 1000;

        this.each(function (index, item) {
            methods._createIFrame(item, index * triggerDelay, cleaningDelay);
        });
        return this;
    },

    _createIFrame: function (item, triggerDelay, cleaningDelay) {
        setTimeout(function () {
            var frame = $('<iframe style="display: none;" ' +
                          'class="multi-download-frame"></iframe>');
            frame.attr('src', $(item).attr('href') || $(item).attr('src'));
            $(item).after(frame);
            setTimeout(function () { frame.remove(); }, cleaningDelay);
        }, triggerDelay);
    }
};

$.fn.multiDownload = function(options) {
    return methods._download.apply(this, arguments);
};

UPDATE: The README.md on multiDownload on Github says... 更新:Github上multiDownload上的README.md说...

Important: All $('.my_links') elements must have defined "href" attribute. 重要说明:所有$('。my_links')元素必须已定义“ href”属性。 "href" must point to documents that generate proper HTML headers ("Content-Disposition: attachment; filename=my_filename"). “ href”必须指向生成正确的HTML标头的文档(“ Content-Disposition:附件; filename = my_filename”)。

The solution? 解决方案? What they said: send out the following header: 他们说了什么:发出以下标头:

Content-disposition: attachment; filename="picture.jpg"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM