HTML5/JavaScript를 사용하여 파일 생성 및 저장
최근 WebGL을 만지작거리고 있는데, 콜라다 리더가 일하고 있습니다.문제는 매우 느리기 때문에(Collada는 매우 상세한 형식이기 때문에) 파일을 사용하기 쉬운 형식(아마 JSON)으로 변환하려고 합니다.JavaScript로 파일을 해석하는 코드는 이미 가지고 있기 때문에 익스포터로서도 사용할 수 있습니다!문제는 저축이다.
이제 파일을 해석하여 결과를 서버로 전송하고 브라우저가 다운로드로 서버에서 파일을 다시 요청하도록 할 수 있습니다.그러나 실제로는 서버는 이 특정 프로세스와는 아무런 관계가 없는데 왜 관여하는 것일까요?원하는 파일의 내용은 이미 메모리에 있습니다.순수 JavaScript를 사용하여 사용자에게 다운로드를 제공할 수 있는 방법이 있습니까?(의심스럽지만 물어보는 편이...)
그리고 분명히 하자면:사용자 모르게 파일 시스템에 액세스하려고 하지 않습니다!사용자는 (아마 드래그 앤 드롭을 통해) 파일을 제공하고 스크립트는 메모리 내의 파일을 변환하고 결과를 다운로드하라는 메시지를 표시합니다.브라우저에 관한 한 이 모든 것은 "안전한" 활동이어야 합니다.
[Edit] : 사전에 언급하지 않았기 때문에 Flash라고 대답한 포스터는 충분히 유효합니다만, 순수 HTML5로 무엇을 할 수 있는지를 강조하기 위해 노력하고 있습니다.저 같은 경우에는 플래시가 바로 꺼집니다.(비록 '진짜' 웹 앱을 사용하는 모든 사람에게 완벽하게 유효한 답변이지만)서버를 끌어들이고 싶지 않으면 운이 다한 것처럼 보이는군요.어쨌든 고마워!
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!');
확인, 데이터 생성:매튜와 덴크스터가 그 옵션을 지적해 준 덕분에 URI는 확실히 나를 위해 묘기를 부리고 있다.기본적인 방법은 다음과 같습니다.
1) 모든 콘텐츠를 "콘텐츠"라는 문자열로 가져옵니다(예를 들어 처음에 콘텐츠를 작성하거나 내부 내용을 읽습니다).이미 빌드된 페이지 태그의 HTML)
2) 데이터 URI 구축:
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
브라우저 유형 등에 따라 길이가 제한됩니다.Firefox 3.6.12는 최소 256k까지 작동합니다.인코딩 대신 Base64에서의 인코딩URIC 구성 요소가 일을 더 효율적으로 만들 수 있지만, 나에게는 괜찮았습니다.
3) 새 창을 열고 JavaScript 생성 페이지의 다운로드 위치를 묻는 URI 프롬프트로 "리다이렉트"합니다.
newWindow = window.open(uriContent, 'neuesDokument');
바로 그겁니다.
를 정의했습니다.window.saveAs(blob, filename)방법.현재 어떤 브라우저에서도 지원되지 않습니다.그러나 대부분의 최신 브라우저(Internet Explorer 10+ 포함)에 이 기능을 추가하는 FileSaver.js라는 호환성 라이브러리가 있습니다.Internet Explorer 10은navigator.msSaveBlob(blob, filename)메서드(MSDN)는 Internet Explorer 지원용 FileSaver.js에서 사용됩니다.
저는 이 문제에 대한 자세한 내용을 블로그에 올렸습니다.
대용량 파일 저장
데이터 URI가 길면 브라우저에서 성능 문제가 발생할 수 있습니다.클라이언트 측에서 생성된 파일을 저장하는 또 다른 옵션은 내용을 Blob(또는 File) 개체에 저장하고 를 사용하여 다운로드 링크를 작성하는 것입니다.그러면 BLOB의 내용을 검색하는 데 사용할 수 있는 URL이 반환됩니다.blob은 다음 중 하나가 될 때까지 브라우저 내부에 저장됩니다.URL.revokeObjectURL()URL에서 호출되거나 URL을 작성한 문서가 닫힙니다.대부분의 웹 브라우저는 오브젝트 URL을 지원하지만 Opera Mini만 지원하지 않습니다.
강제 다운로드
데이터가 텍스트 또는 이미지인 경우 브라우저는 파일을 디스크에 저장하지 않고 열 수 있습니다.했을 때 하려면 , 「」를 합니다.download기여하다.단, 모든 웹 브라우저가 다운로드 속성을 지원하는 것은 아닙니다.또 다른 옵션은application/octet-stream파일의 MIME 유형으로 지정되지만, 이로 인해 파일이 바이너리 BLOB로 표시되므로 파일 이름을 지정하지 않거나 지정할 수 없는 경우 특히 사용자에게 유용합니다.텍스트 링크 클릭 시 "다른 이름으로 저장..." 팝업이 열려 HTML의 PDF를 참조하십시오.
파일 이름 지정
파일 컨스트럭터를 사용하여 BLOB를 작성하는 경우 파일 이름을 설정할 수도 있지만 파일 컨스트럭터를 지원하는 웹 브라우저는 Chrome 및 Firefox를 포함한 일부뿐입니다.filename은, 의 인수로 지정할 수도 있습니다.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();
}
Doug Neiner의 Downloadify는 플래시 기반 JavaScript 인터페이스입니다.
Downloadify는 소규모 JavaScript + Flash 라이브러리입니다.서버의 조작 없이 브라우저에서 파일을 즉시 생성하고 저장할 수 있습니다.
심플한 솔루션!
<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>모든 최신 브라우저에서 작동합니다.
File Saver ( https://github.com/eligrey/FileSaver.js) )를 사용했는데, 정상적으로 동작합니다.
예를 들어 페이지에 표시된 로그를 내보내기 위해 이 기능을 수행했습니다.
BLOB를 사용하다 그래서 제가 이 글을 제대로 쓰지 못했을 수도 있지만, 제게는 효과가 있습니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★이것은 글로벌하게 하기 위한 구문입니다.그렇지 않으면 처음 만난 구문만 대체됩니다.
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");
}
데이터 URI를 생성할 수 있습니다.단, 브라우저 고유의 제한이 있습니다.
나는 나에게 효과가 있는 두 가지 간단한 방법을 발견했다. 클릭된 「 」를 하여, 「 」a이치노 두 번째, 리고atingatingatingatingatingatingatingatingatingating a, a.click()하다, 두 ) block은 사용자의 클릭액션에 의해 호출됩니다.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>
해라
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 이상으로 업그레이드(샌드박스 보안 제한으로 인해) - 하지만 JSFiddle 버전은 작동 - 여기에서 작동
다음은 Mathew가 제안한 URI 메서드에 대한 링크입니다. safari에서는 동작했지만 파일 형식을 설정할 수 없었기 때문에 "알 수 없음"으로 저장되고 나중에 다시 이동하여 파일을 표시해야 합니다.
http://www.nihilogic.dk/labs/canvas2image/
localStorage를 사용할 수 있습니다.이것은 Html5에 상당하는 쿠키입니다.Chrome과 Firefox에서는 작동하는 것처럼 보이지만 Firefox에서는 서버에 업로드해야 했습니다.즉, 자택 컴퓨터에서 직접 테스트가 작동하지 않았습니다.
HTML5의 예시를 작성하고 있습니다.http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html에 접속하여 미로 1로 스크롤합니다.미로를 재구축하기 위한 정보는 localStorage를 사용하여 저장됩니다.
xml 파일을 로드하고 작업하기 위한 HTML5 JavaScript를 찾고 있습니다.이전 html 및 JavaScript와 동일한가요???
앞서 설명한 바와 같이 File API와 FileWriter 및 FileSystem API를 함께 사용하여 브라우저 탭/창의 컨텍스트에서 클라이언트 머신에 파일을 저장할 수 있습니다.
단, 후자의 2개의 API와 관련하여 주의해야 할 점이 몇 가지 있습니다.
- API 구현은 현재 Chrome 기반 브라우저(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){}
});
raw File, 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 API와 FileWriter API는 더 이상 표준 트랙에 포함되지 않지만 다음과 같은 이유로 경우에 따라서는 사용이 정당화될 수 있습니다.
- 구현되지 않은 브라우저 벤더의 새로운 관심으로 인해 바로 복구될 수 있음
- 구현(크롬 기반) 브라우저 시장 점유율이 높다
- 구글(Chromium의 주요 기여자)은 API의 종료일과 종료일을 알려주지 않았습니다.
다만, 「일부 케이스」가 독자 분의 케이스에 포함되는지 아닌지는, 독자 분의 판단입니다.
*Baked Goods는 바로 여기 있는 이 사람이 관리하고 있습니다:)
이 스레드는 바이너리 파일을 생성하는 방법과 지정된 파일을 다운로드하도록 프롬프트하는 방법을 알아내는 데 매우 유용했습니다.이 모든 것은 서버 없이 클라이언트 코드로 되어 있습니다.
첫 번째 단계는 저장 중인 데이터에서 바이너리 블롭을 생성하는 것이었습니다.단일 바이너리 유형에 대해 이 작업을 수행할 수 있는 샘플이 많이 있습니다. 이 예에서는 여러 유형의 바이너리 형식을 사용하여 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();
"ahref" 방식을 테스트해보니 Firefox와 Chrome의 웹 개발자 툴이 혼동되는 것을 알 수 있었습니다.a.click()이 발행된 후 디버깅을 재시작해야 했습니다.FileSaver에서도 같은 일이 발생했습니다(같은 ahref 방식을 사용하여 실제로 절약합니다).이 문제를 해결하기 위해 새로운 임시 창을 만들고 거기에 요소 a를 추가한 후 클릭했습니다.
function download_json(dt) {
var csv = ' var data = ';
csv += JSON.stringify(dt, null, 3);
var uricontent = 'data:application/octet-stream,' + encodeURI(csv);
var newwin = window.open( "", "_blank" );
var elem = newwin.document.createElement('a');
elem.download = "database.js";
elem.href = uricontent;
elem.click();
setTimeout(function(){ newwin.close(); }, 3000);
}
다음은 파일을 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와 함께 zip 파일을 다운로드합니다.hello world라는 콘텐츠를 가진 txt.모든 것이 정상적으로 동작하면, 파일이 다운로드 됩니다.
<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 를 참조해 주세요.
이를 사용하여 텍스트 및 기타 데이터를 저장할 수 있습니다.
function downloadFile(name, data) {
let a = document.createElement("a");
if (typeof a.download !== "undefined") a.download = name;
a.href = URL.createObjectURL(new Blob([data], {
type: "application/octet-stream"
}));
a.dispatchEvent(new MouseEvent("click"));
}
이 함수는 Anchor 요소를 만들고 .download를 통해 이름을 설정하고(지원되는 경우), 개체(URL.createObjectURL)에서 생성된 URL(.href)을 할당하며, 이 경우 Blob 개체를 지정하고 클릭 이벤트를 디스패치합니다.한마디로 다운로드 링크를 클릭하는 것과 같습니다.
코드 예시
downloadFile("textfile.txt", "A simple text file");
downloadFile(
"circle.svg",
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="42" />
</svg>`
);
downloadFile(
"utf8string.txt",
new Uint8Array([85, 84, 70, 45, 56, 32, 115, 116, 114, 105, 110, 103]) // "UTF-8 string"
);
이 함수는 File, Blob 및 MediaSource도 받아들입니다.
function downloadFile(name, data) {
if (!(data instanceof File || data instanceof Blob || data instanceof MediaSource)) {
return downloadFile(name, new Blob([data], {
type: "application/octet-stream"
}));
}
let a = document.createElement("a");
if (typeof a.download !== "undefined") a.download = name;
a.href = URL.createObjectURL(data);
a.dispatchEvent(new MouseEvent("click"));
}
또는 다음 두 가지 기능을 사용할 수 있습니다.
function downloadFile(name, data) {
return downloadObject(new Blob([data], {
type: "application/octet-stream"
}));
}
function downloadObject(name, object) {
let a = document.createElement("a");
if (typeof a.download !== "undefined") a.download = name;
a.href = URL.createObjectURL(object);
a.dispatchEvent(new MouseEvent("click"));
}
'txt' 또는 'js'와 같은 간단한 파일의 경우 fs-browser 패키지를 사용할 수 있습니다.
서버를 호출하지 않는 클라이언트 측의 다운로드 및 내보내기 방법이 쉽고 편리합니다.
import { exportFile } from 'fs-browsers';
const onExportClick = (textToExport) => {
// Export to txt file
exportFile(textToExport);
}파일 이름이나 파일 형식까지 변경하고 싶은 경우 다음과 같이 쉽게 변경할 수 있습니다.
import { exportFile } from 'fs-browsers';
const onExportClick = (textToExport) => {
// Export to js file called 'file.js'
exportFile(textToExport, { fileName: 'file.js' });
}보다 복잡한 파일의 경우는, 말씀하신 대로 서버를 사용할 필요가 있습니다.
엑셀('xls')은 엑셀입니다.
import { exportFile, EXCEL_FILE } from 'fs-browsers';
const data = [{ "id": 5, "name": "John", "grade": 90, "age": 15 }, { "id": 7, "name": "Nick", "grade": 70, "age": 17 }];
const headings = ["Student ID", "Student Name", "Test Grade", "Student Age"];
exportFile(data, { type: EXCEL_FILE, headings: headings, fileName: 'grades.xls' });아마도 미래에는 다른 종류의 파일도 있을 것이다.
언급URL : https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file
'programing' 카테고리의 다른 글
| Python은 테일 재귀를 최적화합니까? (0) | 2022.10.06 |
|---|---|
| 한 자바스크립트로 작성된 함수를 다른 JS파일로 호출할 수 있습니까? (0) | 2022.10.06 |
| 기능성 데코레이터를 만들고 어떻게 묶어야 하나요? (0) | 2022.10.06 |
| 로컬 호스트에서의 XAMPP에서의 MySQL 루트 패스워드 리셋 (0) | 2022.10.06 |
| 지난달의 첫날과 마지막 날을 얻는 가장 좋은 방법은? (0) | 2022.10.06 |