최근에 WebGL을 다루고 있으며 Collada 리더가 작동하고 있습니다. 문제는 꽤 느리다는 것입니다 (Collada는 매우 장황한 형식입니다). 파일을 사용하기 쉬운 형식 (아마 JSON)으로 변환하기 시작합니다. JavaScript로 파일을 구문 분석하는 코드가 이미 있으므로 내보내기 프로그램으로도 사용할 수 있습니다! 문제가 해결되었습니다.

이제 파일을 구문 분석하고 결과를 서버로 보내고 브라우저가 서버에서 다운로드로 파일을 다시 요청할 수 있음을 알고 있습니다. 그러나 실제로 서버는이 특정 프로세스와 아무 관련이 없기 때문에 왜 관여해야합니까? 메모리에 원하는 파일의 내용이 이미 있습니다. 순수한 JavaScript를 사용하여 다운로드를 사용자에게 표시 할 수있는 방법이 있습니까? (나는 그것을 의심하지만 물어볼 수도 있습니다 ...)

그리고 분명히하기 위해 : 사용자 모르게 파일 시스템에 액세스하려고하지 않습니다! 사용자는 파일 (아마 드래그 앤 드롭을 통해)을 제공하고 스크립트는 파일을 메모리로 변환하며 결과를 다운로드하라는 메시지가 표시됩니다. 브라우저에 관한 한 모든 작업은 "안전한"활동이어야합니다.

[편집] : 앞서 언급하지 않았으므로 "플래시"라고 답한 포스터는 충분히 유효하지만 내가하고있는 작업의 일부는 순수한 HTML5로 수행 할 수있는 작업을 강조하려는 시도입니다. 내 경우에는 바로. (이것은 "실제"웹 앱을하는 사람에게는 완벽하게 유효한 답변이지만) 서버를 사용하고 싶지 않다면 운이 좋지 않은 것 같습니다. 어쨌든 고마워!

OK, 데이터 생성 : Matthew와 Dennkster가 그 옵션을 지적함으로써 URI가 나를 위해 속임수를 쓰지 않습니다! 기본적으로 내가하는 방법은 다음과 같습니다.

1) 모든 내용을 "content"라는 문자열로 가져옵니다 (예 : 처음에 작성하거나 이미 작성된 페이지 태그의 innerHTML을 읽음).

2) 데이터 URI를 빌드하십시오.

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

브라우저 유형 등에 따라 길이 제한이 있지만 Firefox 3.6.12는 256k 이상까지 작동합니다. encodeURIComponent를 대신 사용하여 Base64로 인코딩하면 작업이 더 효율적일 수 있지만 나에게는 괜찮습니다.

3) 새 창을 열고이 URI로 "리디렉션"하면 JavaScript로 생성 된 페이지의 다운로드 위치를 묻는 메시지가 표시됩니다.

newWindow = window.open(uriContent, 'neuesDokument');

그게 다야.

HTML5 지원 브라우저를위한 간단한 솔루션 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

용법

download('test.txt', 'Hello world!');

HTML5는 window.saveAs(blob, filename)메소드를 정의했습니다 . 현재 모든 브라우저에서 지원되지 않습니다. 그러나 대부분의 최신 브라우저 (Internet Explorer 10 이상 포함)에이 기능을 추가하는 FileSaver.js 라는 호환성 라이브러리가 있습니다. Internet Explorer 10은 Internet Explorer 지원을 위해 FileSaver.js에서 사용되는 navigator.msSaveBlob(blob, filename)방법 ( MSDN )을 지원합니다.

이 문제에 대한 자세한 내용이 담긴 블로그 게시물 을 작성했습니다 .

큰 파일 저장

긴 데이터 URI는 브라우저에서 성능 문제를 일으킬 수 있습니다. 클라이언트 측에서 생성 된 파일을 저장하는 또 다른 옵션은 해당 컨텐츠를 Blob (또는 File) 오브젝트에 넣고를 사용하여 다운로드 링크를 작성하는 것 URL.createObjectURL(blob)입니다. Blob의 내용을 검색하는 데 사용할 수있는 URL을 반환합니다. Blob은 URL.revokeObjectURL()URL에서 호출되거나이를 생성 한 문서가 닫힐 때까지 브라우저 내부에 저장됩니다 . 대부분의 웹 브라우저는 객체 URL 을 지원하며 Opera Mini는이를 지원하지 않는 유일한 URL 입니다.

다운로드 강제

데이터가 텍스트 또는 이미지 인 경우 브라우저는 파일을 디스크에 저장하는 대신 파일을 열 수 있습니다. 링크를 클릭 할 때 파일이 다운로드되도록하려면 download속성을 사용할 수 있습니다 . 그러나 모든 웹 브라우저가 다운로드 속성을 지원 하지는 않습니다 . 다른 옵션은 application/octet-stream파일의 MIME 유형으로 사용하는 것이지만 파일 이름을 지정하지 않거나 지정할 수없는 경우 파일이 이진 얼룩으로 표시됩니다. '참조 열기에 힘을 "다른 이름으로 저장 ..."HTML에서 PDF의 텍스트 링크를 클릭에서 열린 팝업 '.

파일 이름 지정

Blob이 File 생성자로 생성 된 경우 파일 이름을 설정할 수도 있지만 Chrome 및 Firefox를 포함한 일부 웹 브라우저에서만 File 생성자를 지원합니다 . 파일 이름을 download속성에 대한 인수로 지정할 수도 있지만 이는 수많은 보안 고려 사항 이 적용 됩니다 . Internet Explorer 10 및 11은 고유 한 방법 인 msSaveBlob을 제공 하여 파일 이름을 지정합니다.

예제 코드

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

이를 위해 Flash 기반 JavaScript 인터페이스 인 Doug Neiner의 Downloadify 를 살펴보십시오 .

Downloadify는 서버 상호 작용없이 브라우저에서 파일을 즉시 생성하고 저장할 수있는 작은 JavaScript + Flash 라이브러리입니다.

간단한 해결책!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

모든 최신 브라우저에서 작동합니다.

데이터 URI를 생성 할 수 있습니다 . 그러나 브라우저마다 제한이 있습니다.

FileSaver ( https://github.com/eligrey/FileSaver.js )를 사용했으며 정상적으로 작동합니다.
예를 들어,이 기능을 사용하여 페이지에 표시된 로그를 내 보냅니다.
Blob의 인스턴스화를 위해 배열을 전달해야 하므로이 방법을 올바르게 작성하지 않았지만 나에게 효과적입니다.
만일을 대비해서, replace에주의를 기울이십시오 : 이것은 이것을 전역으로 만드는 구문입니다.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

나는 두 가지 간단한 접근법을 찾았습니다. 먼저 이미 클릭 한 a요소를 사용 하고 다운로드 데이터를 주입합니다. 둘째, a다운로드 데이터 로 요소를 생성 a.click()하고 다시 실행 하고 제거합니다. 그러나 두 번째 방법은 사용자 클릭 동작에 의해 호출 된 경우에만 작동합니다. (일부) click()시간 초과 (setTimeout) 후에로드되거나 트리거 될 때와 같은 다른 컨텍스트의 브라우저 블록 .

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Mathew가 제안한 데이터 URI 메소드에 대한 링크는 사파리에서 작동했지만 파일 형식을 설정할 수 없어서 "알 수 없음"으로 저장 된 다음 나중에 다시 가서 순서대로 변경해야합니다. 파일을 보려면 ...

http://www.nihilogic.dk/labs/canvas2image/

localStorage를 사용할 수 있습니다. 이것은 Html5 쿠키와 동일합니다. Chrome에서는 작동하지만 Firefox에서는 Firefox이지만 서버에 업로드해야합니다. 즉, 가정용 컴퓨터에서 직접 테스트하는 것이 효과가 없었습니다.

HTML5 예제를 작성 중입니다. 이동 http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html 미로 하나에 스크롤. 미로를 재 구축하기위한 정보는 localStorage를 사용하여 저장됩니다.

이 기사에서는 xml 파일을로드하고 작업하기위한 HTML5 JavaScript를 찾고있었습니다. 이전 HTML 및 JavaScript와 동일합니까 ????

시험

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

이진 데이터를 다운로드하려면 여기를보십시오

최신 정보

2020.06.14 Chrome을 83.0 이상으로 업그레이드하면 SO 스 니펫 중지가 작동합니다 ( 샌드 박스 보안 제한 으로 인해 ). 그러나 JSFiddle 버전은 작동 합니다.

앞에서 언급 한 것처럼 FileWriter 및 FileSystem API 와 함께 File API를 사용하여 브라우저 탭 / 창의 컨텍스트에서 클라이언트 시스템에 파일을 저장할 수 있습니다.

그러나 두 가지 API와 관련된 몇 가지 사항이 있습니다.

• API 구현은 현재 Chromium 기반 브라우저 (Chrome & Opera)에만 존재합니다.
• 두 API 모두 2014 년 4 월 24 일 W3C 표준 트랙에서 제외되었으며 현재는 독점적입니다.
• 향후 브라우저 구현에서 (현재 독점적 인) API를 제거 할 가능성이 있습니다
• 샌드 박스 (파일이 더 효과를 얻을 수있는 디스크의 외부에 위치)은 API를 사용하여 생성 된 파일을 저장하는 데 사용
• 가상 파일 시스템 사용 (반드시이 브라우저 내에서 액세스 않는 것과 같은 형태로 디스크에 존재하지 않는 디렉토리 구조) API를 사용하여 만든 파일을 나타냅니다

다음은이를 수행하기 위해 API가 직간접 적으로 사용되는 방법에 대한 간단한 예입니다.

구운 상품 *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

원시 파일, FileWriter 및 FileSystem API 사용

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

FileSystem 및 FileWriter API는 더 이상 표준 트랙에 없지만, 다음과 같은 이유로 일부 경우에 사용이 정당화 될 수 있습니다.

• 구현되지 않은 브라우저 공급 업체의 새로운 관심으로 다시 브라우저를 배치 할 수 있습니다.
• (크롬 기반) 브라우저 구현의 시장 침투력이 높음
• Google (Chromium의 주요 기여자)이 API에 대해 수명을 다하지 않았습니다.

그러나 "일부 사례"가 자신의 사례를 포함하는지 여부는 귀하가 결정하는 것입니다.

* BakedGoods는이 사람 이외의 다른 사람에 의해 유지됩니다 :)

이 스레드는 서버가없는 클라이언트 코드에서 이진 파일을 생성하고 명명 된 파일을 다운로드하라는 메시지를 표시하는 방법을 알아내는 데 매우 중요했습니다.

나를위한 첫 번째 단계는 내가 저장 한 데이터에서 이진 Blob을 생성하는 것이 었습니다. 단일 이진 유형에 대해이 작업을 수행하기위한 많은 샘플이 있습니다. 제 경우에는 블롭을 만들기 위해 배열로 전달할 수있는 여러 유형의 이진 형식이 있습니다.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

다음 단계는 사용자에게 미리 정의 된 이름으로이 Blob을 다운로드하라는 메시지를 브라우저에 표시하는 것입니다.

필요한 것은 HTML5에 추가 한 명명 된 링크로, 초기 파일 이름을 바꾸는 데 재사용 할 수있었습니다. 링크를 표시 할 필요가 없으므로 숨겨 두었습니다.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

마지막 단계는 사용자에게 파일을 다운로드하라는 메시지를 표시하는 것입니다.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

다음은 파일을 ZIP으로 내보내는 자습서입니다.

시작하기 전에 파일을 저장할 라이브러리가 있으며 라이브러리 이름은 fileSaver.js입니다.이 라이브러리는 여기에서 찾을 수 있습니다. 시작하겠습니다. 이제 필요한 라이브러리를 포함하십시오.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

이제이 코드를 복사하면 Hello World 컨텐츠가있는 hello.txt 파일이 포함 된 zip 파일이 다운로드됩니다. 모든 것이 제대로 작동하면 파일을 다운로드합니다.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

file.zip이라는 파일이 다운로드됩니다. 자세한 내용은 여기를 참조하십시오 : http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library