Javascript：如何使用特定文件名而不是 download.png 保存图像答案

【问题标题】：Javascript: How to Save Image with a particular filename instead of download.pngJavascript：如何使用特定文件名而不是 download.png 保存图像
【发布时间】：2014-06-04 22:02:59
【问题描述】：

我正在尝试将文件下载为 helloWorld.png，但它始终保存为 download.png。

你能帮我找出我缺少的东西吗？

var $container = $('#svg-container'),
        // Canvg requires trimmed content
    content = $container.html().trim(),
    canvas = document.getElementById('thecanvas');
    // Draw svg on canvas
    canvg(canvas, content);
    // Change img be SVG representation
    var theImage =  canvas.toDataURL('image/png');
    $('#svg-img').attr('src', theImage);



function downloadWithName(uri, name) {

    function eventFire(el, etype){
        if (el.fireEvent) {
            (el.fireEvent('on' + etype));
        } else {
            var evObj = document.createEvent('Events');
            evObj.initEvent(etype, true, false);
            el.dispatchEvent(evObj);
        }
    }

    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    eventFire(link, "click");

}

downloadWithName(theImage, "helloWorld.png")

http://jsfiddle.net/shanthisivanesan/a2FLx/22/

【问题讨论】：

你考虑过html5下载="filename.ext"
我必须像在我的 jsfiddle 示例中那样以编程方式执行此操作，在该示例中动态创建锚标记。你能告诉我我错过了什么吗？
似乎可以直接使用 base64 -> jsfiddle.net/W48wQ，所以我猜它与 canvg() 所做的任何事情以及如何检索 base64 有关。您是否等待画布加载等？
就我而言，我正在将 svg 转换为画布，然后执行此操作。甚至 csv 也对我不起作用。 jsfiddle.net/shanthisivanesan/a2FLx/21
嗯，download 是一个与 src 不同的属性。 $('#svg-img').attr('src', theImage).attr('download', filename); - 我看到你有link.download，所以我的评论没用。但是，您正在加载 jquery。为什么不在这个函数中也使用它呢？

标签： javascript jquery canvas canvg

【解决方案1】：

试试这个 jquery 代码，它适用于最新的 Firefox，（其中 uri 是 datauri，name 是图像文件名）

$('<a>',{
    type: "submit",
    download: name,
    href: uri,
    id: 'download_link'
}).appendTo('body');


$('a#download_link')[0].click();

【讨论】：