2012-08-06 2 views
0

여기 상황은 다음과 같습니다. 동적 인 웹 페이지가 있습니다. "select"가있는 양식과 링크 (또는 버튼)가 있습니다. 사용자는 링크를 클릭하면 : 링크/버튼을 다운로드 할 수있는 방법은 무엇입니까?

  1. 선택 옵션은 "디스플레이"이면

    는 다음 (JQuery와 AJAX로를 통해 공급)의 데이터가 표시된다. 이것은 완료되었습니다. - NO PROBEM.

  2. 옵션이 다운로드되면 링크 (또는 버튼)를 클릭하여 데이터를 다운로드 할 수 있습니까?

"다운로드"옵션의 경우 AJAX에서 반환 된 결과는 단지 CSV 텍스트입니다. 파일이 아니라 자바 스크립트 문자열입니다. 다운로드 가능한 파일로 바꾸려면 어떻게해야합니까?

답변

3

이 시도 : http://jsfiddle.net/vpnQe/

놀러 자유롭게 희망이 당신의 필요 데 도움이 :)

코드

var URL = window.webkitURL || window.URL; 
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.BlobBuilder; 

var url; 

$("button").click(function() { 
    if (url) URL.revokeObjectURL(url); 
    var bb = new BlobBuilder(); 
    bb.append("it works!"); 
    var file = bb.getBlob("text/plain"); 
    url = URL.createObjectURL(file); 
    $("a[download]").attr("href", url); 

    var evt = document.createEvent('MouseEvents'); 
    evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null); 
    $("a[download]")[0].dispatchEvent(evt); 
});​ 

HTML

<article> 
    <button type="button">create url, put it in below link, and click it</button><br/> 
    <a download="test.txt">Download as text.txt</a> 
</article> 
<footer> 
<ul> 
    <li><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createObjectURL">window.URL.createObjectURL</a></li> 
    <li><a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">a[download]</a></li> 
</ul> 
</footer>​ 
+1

나는 이것이 단지 JS만을 사용하여 가능하다고 생각 해본 적이 없다. – haynar

+0

@haynar':)'< Bazinga > JQuery = "브라우저에서의 Jumbo Quality ery awesomness"또는 백엔드와의 통신에서 일어난다. ~ –

+1

이것은 데이터 URL을 사용하는 아주 멋진 솔루션입니다. 분명히 최신 브라우저입니다. – Strelok

0

"다운로드"옵션을 선택한 경우 새 창을 열어 서버 쪽에서 적절한 헤더를 사용하여이 내용을 창에 표시하는 대신 파일에 다운로드해야한다고 브라우저에 알리는 것이 좋습니다.

<?php 
header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"my-data.csv\""); 

// output the content of your file here 

?> 
0

당신이 예를 살펴한다 (나는 당신이 사용합니까 어떤 서버 측 언어를 알지 않는 한) 주로의 헤더는 PHP를 사용하여 CSV로, 예를 들어, 다운로드하려는 작업에 따라 달라집니다.

http://drupal.org/node/417866

당신의 아파치를 실행하는 경우 코드에 넣어 해달라고 그래서 각 디렉토리가 제어되는 방식을 변경합니다. .htaccess가 정보가 클라이언트에 전달되는 방식을 제어하는 ​​위치에 넣으면됩니다.

관련 문제