JavaScript를 사용하여 기존 파일에 데이터를 쓰고 싶습니다. 콘솔에서 인쇄하고 싶지 않습니다. 실제로에 데이터를 쓰고 싶습니다 abc.txt
. 나는 많은 대답을 읽었지만 콘솔에서 인쇄되는 모든 곳을 읽었습니다. 어떤 곳에서는 코드를 주었지만 작동하지 않습니다. 따라서 실제로 파일에 데이터를 쓰는 방법을 알려주십시오.
코드를 참조했지만 작동하지 않습니다 : 오류 제공 :
잡히지 않은 TypeError : 잘못된 생성자
크롬과
SecurityError : 작업이 안전하지 않습니다.
Mozilla에서
var f = "sometextfile.txt";
writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")
function writeTextFile(afilename, output)
{
var txtFile =new File(afilename);
txtFile.writeln(output);
txtFile.close();
}
Javascript 만 사용하거나 NOT을 사용하여 데이터를 파일에 실제로 쓸 수 있습니까?
답변
이것에 대한 몇 가지 제안-
- 클라이언트 시스템에서 파일을 쓰려고 시도하는 경우 브라우저 간 방식으로 파일을 작성할 수 없습니다. IE에는 “신뢰할 수있는”응용 프로그램이 ActiveX 개체를 사용하여 파일을 읽고 쓸 수 있도록하는 방법이 있습니다.
- 서버에 저장하려는 경우 텍스트 데이터를 서버로 전달하고 서버 측 언어를 사용하여 파일 쓰기 코드를 실행하십시오.
- 클라이언트 쪽에서 상당히 작은 정보를 저장하기 위해 쿠키를 사용할 수 있습니다.
- 로컬 스토리지에 HTML5 API 사용
답변
다음을 사용하여 브라우저에서 파일을 만들 수 있습니다 Blob
및 URL.createObjectURL
. 모든 최신 브라우저 에서이 기능을 지원합니다 .
방대한 보안 문제가 발생할 수 있으므로 직접 만든 파일을 저장할 수는 없지만 사용자에게 다운로드 링크로 제공 할 수 있습니다. 다운로드 속성을 지원하는 브라우저에서 링크 download
속성 을 통해 파일 이름을 제안 할 수 있습니다 . 다른 다운로드와 마찬가지로 파일을 다운로드하는 사용자는 파일 이름에 대한 최종 결정을 내립니다.
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
// If we are replacing a previously generated file we need to
// manually revoke the object URL to avoid memory leaks.
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
// returns a URL you can use as a href
return textFile;
};
다음 은이 기술을 사용하여에서 임의의 텍스트를 저장 하는 예 입니다 textarea
.
사용자가 링크를 클릭하지 않고 다운로드를 즉시 시작하려는 경우 Lifecube 의 답변 처럼 마우스 이벤트를 사용하여 링크에서 마우스 클릭을 시뮬레이션 할 수 있습니다 . 이 기술을 사용 하는 업데이트 된 예제 를 만들었습니다 .
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.createElement('a');
link.setAttribute('download', 'info.txt');
link.href = makeTextFile(textbox.value);
document.body.appendChild(link);
// wait for the link to be added to the document
window.requestAnimationFrame(function () {
var event = new MouseEvent('click');
link.dispatchEvent(event);
document.body.removeChild(link);
});
}, false);
답변
브라우저 JavaScript에 대해 이야기하는 경우 보안상의 이유로 로컬 파일에 직접 데이터를 쓸 수 없습니다. HTML 5의 새로운 API는 파일을 읽을 수만 있습니다.
그러나 데이터를 쓰려면 사용자가 파일을 로컬로 다운로드 할 수있게하십시오. 다음 코드가 작동합니다.
function download(strData, strFileName, strMimeType) {
var D = document,
A = arguments,
a = D.createElement("a"),
d = A[0],
n = A[1],
t = A[2] || "text/plain";
//build download link:
a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);
if (window.MSBlobBuilder) { // IE10
var bb = new MSBlobBuilder();
bb.append(strData);
return navigator.msSaveBlob(bb, strFileName);
} /* end if(window.MSBlobBuilder) */
if ('download' in a) { //FF20, CH19
a.setAttribute("download", n);
a.innerHTML = "downloading...";
D.body.appendChild(a);
setTimeout(function() {
var e = D.createEvent("MouseEvents");
e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
D.body.removeChild(a);
}, 66);
return true;
}; /* end if('download' in a) */
//do iframe dataURL download: (older W3)
var f = D.createElement("iframe");
D.body.appendChild(f);
f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
setTimeout(function() {
D.body.removeChild(f);
}, 333);
return true;
}
그것을 사용하려면 :
download('the content of the file', 'filename.txt', 'text/plain');
답변
위의 답변은 유용하지만 버튼 클릭시 직접 텍스트 파일을 다운로드하는 데 도움이 되는 코드 를 찾았습니다 . 이 코드에서 filename
원하는대로 변경할 수도 있습니다 . HTML5의 순수한 자바 스크립트 함수입니다. 나를 위해 작동합니다!
function saveTextAsFile()
{
var textToWrite = document.getElementById("inputTextToSave").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
답변
시험
let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent("My DATA");
a.download = 'abc.txt';
a.click();
답변
새로운 Blob
솔루션 을 사용하는 것이 불가능한 경우 , 최신 브라우저에서 최상의 솔루션을 보장하기 위해 파일 크기에 제한이있는이 간단한 접근 방식을 여전히 사용할 수 있습니다.
function download() {
var fileContents=JSON.stringify(jsonObject, null, 2);
var fileName= "data.json";
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.click();
}
setTimeout(function() {download()}, 500);
$('#download').on("click", function() {
function download() {
var jsonObject = {
"name": "John",
"age": 31,
"city": "New York"
};
var fileContents = JSON.stringify(jsonObject, null, 2);
var fileName = "data.json";
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.click();
}
setTimeout(function() {
download()
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="download">Download me</button>
답변
위의 사용자 @ useless-code ( https://stackoverflow.com/a/21016088/327386 )의 코드 를 사용하여 파일을 생성하십시오. 파일을 자동으로 다운로드하려면 textFile
방금 생성 된 파일을이 함수로 전달하십시오 .
var downloadFile = function downloadURL(url) {
var hiddenIFrameID = 'hiddenDownloader',
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}