형식을 가진 txt 파일로 HTML 표를 저장하십시오 (Ascii Art)

나는 이와 같은 Json 파일의 값을 가진 HTML 표를 작성했습니다. json 데이터를 인라인으로 가지고 있으며 일부 CSS를 사용하여 테이블을 만듭니다.형식을 가진 txt 파일로 HTML 표를 저장하십시오 (Ascii Art)

<style> 
table { 
width: 60%; 
line-height: inherit; 
text-align: left; 
} 
table td { 
padding: 5px; 
vertical-align: top; 
} 
table tr.top table td.title { 
font-size: 45px; 
line-height: 45px; 
color: #333; 
} 

</style> 
</head> 
<body> 

<div id="box"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script> 
<script type="mustache/x-tmpl" id="helloTmpl"> 

<h1>number {{number}}</h1> 
<table cellpadding="0" cellspacing="0" id="t01"> 
    <tr class="top"> 
     <td colspan="1"> 
      <table> 
       <tr> 
        <td class="title"> 

        </td> 
        <td> 
         Number #: {{number}} 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr class="information"> 
     <td colspan="1 "> 
      <table> 
       <tr> 
        <td>Name<br> 
         {{seller.name}}<br> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr></br> 

</table> 

</script> 

<script> 
    var data = { 
"number": "123", 
"seller": { 
    "name": "TestName" 
    } 
    }; 
var tmpl = document.getElementById("helloTmpl").innerHTML; 
var html = Mustache.to_html(tmpl, data); 
var box = document.getElementById("box"); 

box.innerHTML = html; 
</script>

이제이 표를 CSS에서 txt 파일에 사용한 형식으로 다운로드해야합니다. 나는 txt 파일에 어떻게 저장할 수 있는지에 대한 모든 것을 발견하지 못했습니다. 또한 형식 (css)을 계속 유지할 수 있는지 알 수 없습니다. 어쩌면 내가 아스키 아트를 사용해야 할까? 하지만 어떻게 연결을 할 수 있는지 잘 모르겠습니다. 아무도 나를 안내 할 수 있니?

출처

2017-12-21 marissalianam

이 무엇을하려고 하는가? 관련있는 모든 CSS를 인라인으로 만들면서 테이블을 포함하는 HTML을 저장하고 싶습니까? 왜냐하면 이제는 동일한 파일에 CSS와 HTML이 이미 있으므로 파일을 저장하면 브라우저에서 다음에로드 할 때마다 모든 것을 생성합니다. 아니면 적절한 값으로 채워지는 괄호로 저장하고 싶습니까? – DanteTheSmith

이 html 페이지의 출력은 형식이 지정된 테이블입니다. 내가 원하는 것은이 형식의 테이블을 txt 파일에 저장하는 것입니다. – marissalianam

원하는 경우 테이블을 생성 할 때 테이블의 현재 값을 사용하여 현재 HTML을 덤프하는 것만 큼, DOM을 덤프하거나 테이블의 DOM 부분을 덤프하는 것과 같습니다.

당신은 할 수있는이 수동 쉽게 크롬 :

잘 코드에서 테이블 태그를 클릭하고 '복사를 선택합니다 웹 관리자 (F12)의 요소 탭으로 이동을 사용하여 HTML '.

그런 다음 새 파일에 붙여넣고 저장하십시오. 이제 테이블에 파일의 텍스트로 적절한 값이 있습니다.

파일을 HTML로 저장하고 브라우저에서 열면 테이블이 나타납니다. 브라우저에 따라 html 및/또는 body 요소를 감싸서 표시해야 할 수도 있습니다.

프로그래밍 방식하려면 HTML 5가 필요하고 몇 가지 트릭을 사용해야합니다. 당신은 쉽게 대상 전용 테이블 (예 myTable에에) 문서 다운로드 클릭 리스너를 추가 시작 버튼을 할 수 있도록

function saveTextAsFile() 
{ 
    var textToSave = document.getElementById("myTable").innerHTML; 
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); 
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); 
    var fileNameToSaveAs = "generateNameHere"; 

    var downloadLink = document.createElement("a"); 
    downloadLink.download = fileNameToSaveAs; 
    downloadLink.innerHTML = "Download File"; 
    downloadLink.href = textToSaveAsURL; 
    //downloadLink.onclick = destroyClickedElement; 
    downloadLink.style.display = "none"; 
    document.body.appendChild(downloadLink); 

    downloadLink.click(); 
} 

document.getElementById("download").addEventListener("click", saveTextAsFile);

(예에서 ID가로 다운로드) 테이블 아이디를 부여합니다.

여기 Codepen 몇 가지 예를 들어 테이블입니다 : codepen download table to a file

출처

2017-12-21 15:34:34 DanteTheSmith

예. 그렇지만 자동으로 txt 파일을 만들고 싶습니다. Download과 같은 버튼이 있고이 기능으로 txt 파일을 만들고 싶습니다. – marissalianam

파일을 만들려면? 로컬 디스크에 있거나 서버로 보내시겠습니까? 왜냐하면 전자는 두통, 브라우저 보안 설정 등을 줄 수 있기 때문입니다. 브라우저는 기본적으로 사용자가 파일을 요청하지 않아도 디스크에 내용을 저장할 수 없습니다. 서버로 보내고 다른 버튼에서 다운로드 할 수 있습니다. – DanteTheSmith

이것이 내가 할 수있는 최선의 방법이다. 어떤 서버도 HTML5 blob (이전 브라우저에서는 작동하지 않음)을 사용하고 링크를이 링크에 바인드 한 다음 해당 링크를 클릭 할 필요가 없습니다. 사용자는 여전히 파일 저장을 확인해야합니다. 나는 그 문제를 해결할 수 없다는 것을 확신합니다. 이는 보안상의 문제입니다. – DanteTheSmith

형식을 가진 txt 파일로 HTML 표를 저장하십시오 (Ascii Art)

답변

관련 문제