使用数据时,有什么方法可以指定建议的文件名:URI?

2020/10/12 17:01 · javascript ·  · 0评论

例如,如果您点击链接:

data:application/octet-stream;base64,SGVsbG8=

浏览器将提示您下载一个文件,该文件包含超链接本身中以base64形式保存的数据。有什么办法可以建议标记中的默认名称吗?如果没有,是否有JavaScript解决方案?

使用download属性:

<a download='FileName' href='your_url'>

html5-demos.appspot.com / ...上的实时示例

download属性适用于Chrome,Firefox,Edge,Opera,桌面Safari 10 +,iOS Safari 13+,而不是IE11。

如今,Chrome使这一过程变得非常简单:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

仅HTML:使用download属性:

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

仅限Javascript:您可以使用以下代码保存任何数据URI:

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);
    
    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome,Firefox和Edge 13+将使用指定的文件名。

IE11,Edge 12和Safari 9不支持该download属性)将使用默认名称下载文件,或者如果文件类型受支持,则将它们仅显示在新标签中:图像,视频,音频文件,…

根据RFC 2397,不,没有。

有也没有出现任何属性的的<a>元素,你可以使用。

但是HTML5随后download<a>元素引入了属性,尽管在撰写本文时,支持并不普遍(例如,不支持MSIE)

我在netwerk / protocol / data / nsDataHandler.cpp中的firefox源中查看了一下

数据处理程序仅解析内容/类型和字符集,并查看字符串中是否有“; base64”

rfc没有指定文件名,并且至少firefox对此没有文件名,代码会生成一个随机名称加“ .part”

我还检查了Firefox的日志

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

有趣的文件,如果您想查看mozilla来源:

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

我认为您现在可以停止搜索解决方案,因为我怀疑没有解决方案:)

正如该线程注意到的html5具有download属性,它也可以在firefox 20上使用http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

通过使用链接的新“下载”属性并模拟点击,以下Javascript代码段可在Chrome中运行。

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

以下示例说明了它的用法:

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")

没有。

整个目的是它是一个数据流,而不是一个文件。数据源不应该了解将其作为文件处理的用户代理……也不知道。

您可以将下载属性添加到锚元素。

样品:

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>

查看此链接:http :
//lists.w3.org/Archives/Public/uri/2010Feb/0069.html

引用:

它甚至可以

像这样(至少
不会在Opera中)与末尾的; base64一起工作(例如,不会造成问题):

数据:文本/纯文本;字符集= utf-8;标头= Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en; base64,4oiaDQo% 3D

在讨论的其余消息中也有一些信息。

使用服务人员,从最真实的意义上说,这最终是可能的。

  1. 创建一个伪造的URL。例如/saveAs/myPrettyName.jpg
  2. <a href, <img src,window.open(url)中使用URL ,绝对可以使用“真实” URL进行任何操作。
  3. 在工作程序内部,捕获fetch事件,并使用正确的数据进行响应。

现在,即使用户在新选项卡中打开文件并尝试将其保存在浏览器中,浏览器也会建议myPrettyName.jpg。就像文件来自服务器一样。

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});

Google Code上有一个很小的解决方法脚本对我有用:

http://code.google.com/p/download-data-uri/

它将添加一个包含数据的表单,将其提交,然后再次删除该表单。哈基,但它为我做了工作。需要jQuery。

该线程在Google Code页面之前出现在Google中,我认为在此链接也可能有所帮助。

这是基于Holf版本的jQuery版本,适用于Chrome和Firefox,而他的版本似乎仅适用于Chrome。在身体上添加一些东西来做到这一点有点奇怪,但是如果有人有更好的选择,我全力以赴。

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();

这有点骇人听闻,但我以前也遇到过这种情况。我正在用javascript动态生成文本文件,并希望通过使用data-URI对其进行编码来提供下载的文件。

较小的主要用户干预是可能的生成一个链接<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>就像我说的那样,这很不雅致,但是如果您不需要专业的解决方案,它就可以工作。

通过使用Flash首先将名称复制到剪贴板,可以减轻痛苦。当然,如果您允许自己使用Flash或Java(我认为现在对浏览器的支持越来越少了?),您可能会找到另一种方法。

此版本适用于Firefox 43.0(旧版本未测试):

dl.js:

function download() {
  var msg="Hello world!";
  var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});

  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);

  window.location.href=a;
}

dl.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="dl.js"></script>
</head>

<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>

如果单击按钮,它将提供一个名为hello.bin的文件供下载。技巧是使用File而不是Blob

参考:https : //developer.mozilla.org/de/docs/Web/API/File

var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
    {
            var fileData = ['\ufeff' + uri];
            var blobObject = new Blob(fileData);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
    }
    else //chrome
    {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
         window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
            fs.root.getFile(fileName, { create: true }, function (fileEntry) { 
                fileEntry.createWriter(function (fileWriter) {
                    var fileData = ['\ufeff' + uri];
                    var blob = new Blob(fileData);
                    fileWriter.addEventListener("writeend", function () {
                        var fileUrl = fileEntry.toURL();
                        var link = document.createElement('a');
                        link.href = fileUrl;
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }, false);
                    fileWriter.write(blob);
                }, function () { });
            }, function () { });
         }, function () { });
    }

您实际上可以在Chrome和FireFox中实现这一目标。

尝试以下网址,它将下载所使用的代码。

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
本文地址:http://javascript.askforanswer.com/shiyongshujushiyoushenmefangfakeyizhidingjianyidewenjianminguri.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!