Có cách nào để chỉ định tên tệp được đề xuất khi sử dụng dữ liệu: URI không?

Nếu ví dụ bạn theo liên kết:

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

Trình duyệt sẽ nhắc bạn tải xuống một tệp bao gồm dữ liệu được giữ dưới dạng base64 trong chính siêu liên kết. Có cách nào để đề xuất một tên mặc định trong đánh dấu không? Nếu không, có một giải pháp JavaScript?

Sử dụng downloadthuộc tính:

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

Sống ví dụ về html5-demos.appspot.com / ... .

Hiện đang hoạt động trên Chrome, Firefox, Edge, Opera và Safari trên máy tính để bàn nhưng không phải iOS Safari hoặc IE11.

Chrome làm điều này rất đơn giản những ngày này:

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

Chỉ HTML: sử dụng downloadthuộc tính:

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

Chỉ Javascript: bạn có thể lưu bất kỳ URI dữ liệu nào bằng mã này:

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 và Edge 13+ sẽ sử dụng tên tệp được chỉ định.

IE11, Edge 12 và Safari 9 ( không hỗ trợ downloadthuộc tính ) sẽ tải xuống tệp với tên mặc định của họ hoặc họ sẽ chỉ hiển thị nó trong một tab mới, nếu đó là loại tệp được hỗ trợ: hình ảnh, video, tệp âm thanh , Giáo dục

Theo RFC 2397 , không, không có.

Cũng không có bất kỳ thuộc tính nào của <a>yếu tố mà bạn có thể sử dụng.

Tuy nhiên, HTML5 sau đó đã giới thiệu downloadthuộc tính trên <a>phần tử, mặc dù tại thời điểm viết hỗ trợ không phổ biến (chẳng hạn như không hỗ trợ MSIE)

Tôi đã xem một chút trong các nguồn firefox trong netwerk / Protocol / data / nsDataHandler.cpp

trình xử lý dữ liệu chỉ phân tích nội dung / loại và bảng mã và xem nếu có "; base64" trong chuỗi

các đặc tả rfc không có tên tệp và ít nhất firefox xử lý không có tên tệp cho nó, mã tạo ra một tên ngẫu nhiên cộng với ".part"

Tôi cũng đã kiểm tra nhật ký 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

tập tin thú vị nếu bạn muốn xem các nguồn 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

Tôi nghĩ bạn có thể ngừng tìm kiếm một giải pháp ngay bây giờ, vì tôi nghi ngờ là không có :)

như được chú ý trong chủ đề này, html5 có downloadthuộc tính, nó cũng hoạt động trên firefox 20 http://www.whatwg.org/specs/web-apps/cien-work/multipage/links.html#attr-hyperlink-doad

Đoạn mã Javascript sau hoạt động trong Chrome bằng cách sử dụng thuộc tính 'tải xuống' mới của các liên kết và mô phỏng một lần nhấp.

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

Và ví dụ sau đây cho thấy nó sử dụng:

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

Không.

Toàn bộ mục đích là đó là một kho dữ liệu, không phải là một tệp. Nguồn dữ liệu không nên có bất kỳ kiến ​​thức nào về tác nhân người dùng xử lý nó dưới dạng tệp ... và nó không có.

bạn có thể thêm một thuộc tính tải xuống cho phần tử neo.

mẫu vật:

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

Nhìn vào liên kết này: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Trích dẫn:

Nó thậm chí hoạt động (như trong, không gây ra vấn đề gì) với; base64 ở cuối
như thế này (ít nhất là trong Opera):

dữ liệu: text / plain; charset = utf-8; headers = Content-Disposeition% 3A% 20attachment% 3B% 20filename% 3D% 22with% 20spaces.txt 3D

Ngoài ra có một số thông tin trong các thông điệp còn lại của cuộc thảo luận.

Sử dụng nhân viên phục vụ , điều này cuối cùng có thể theo nghĩa thật nhất.

1. Tạo một URL giả. Ví dụ: /saveAs/myPrettyName.jpg
2. Sử dụng URL trong <a href, <img src , window.open (url), hoàn toàn mọi thứ có thể được thực hiện với một URL "thực".
3. Bên trong công nhân, bắt sự kiện tìm nạp và trả lời với dữ liệu chính xác.

Trình duyệt hiện sẽ đề xuất myPrettyName.jpg ngay cả khi người dùng mở tệp trong tab mới và cố lưu nó ở đó. Nó sẽ chính xác như thể tập tin đến từ máy chủ.

// 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 );
    }
});

Có một kịch bản giải pháp nhỏ trên Google Code phù hợp với tôi:

http://code.google.com.vn/p/doad-data-uri/

Nó thêm một biểu mẫu với dữ liệu trong đó, gửi nó và sau đó xóa biểu mẫu lại. Hacky, nhưng nó đã làm công việc cho tôi. Yêu cầu jQuery.

Chủ đề này đã xuất hiện trong Google trước trang Google Code và tôi nghĩ rằng nó cũng hữu ích khi có liên kết ở đây.

Đây là phiên bản jQuery dựa trên phiên bản của Holf và hoạt động với Chrome và Firefox trong khi phiên bản của anh ấy dường như chỉ hoạt động với Chrome. Thật kỳ lạ khi thêm một cái gì đó vào cơ thể để làm điều này nhưng nếu ai đó có một lựa chọn tốt hơn thì tôi sẽ làm tất cả.

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

Đó là một loại tin tặc, nhưng tôi đã từng ở trong tình trạng tương tự trước đây. Tôi đã tự động tạo một tệp văn bản trong javascript và muốn cung cấp nó để tải xuống bằng cách mã hóa nó bằng URI dữ liệu.

Điều này là có thể với sự can thiệp của người dùng lớn nhỏ . Tạo một liên kết <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Như tôi đã nói, điều này là không phù hợp, nhưng nó hoạt động nếu bạn không cần một giải pháp chuyên nghiệp.

Điều này có thể được thực hiện ít đau đớn hơn bằng cách sử dụng flash để sao chép tên vào bảng tạm. Tất nhiên, nếu bạn cho phép mình sử dụng Flash hoặc Java (bây giờ tôi có hỗ trợ trình duyệt ngày càng ít đi?), Có lẽ bạn có thể tìm một cách khác để làm điều này.

Cái này hoạt động với Firefox 43.0 (cũ hơn chưa được kiểm tra):

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>

Nếu nhấp vào nút, nó cung cấp một tệp có tên hello.bin để tải xuống. Thủ thuật là sử dụng File thay vì Blob .

tham khảo: 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 () { });
    }

Bạn thực sự có thể đạt được điều này, trong Chrome và FireFox.

Hãy thử url sau, nó sẽ tải xuống mã đã được sử dụng.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==