月亮

[javascript] html을 word 파일로 만들기 본문

javascript

[javascript] html을 word 파일로 만들기

듀네 2024. 4. 17. 18:05

ckeditor을 사용하면서 에디터의 리턴 결과물이 html인데, html의 경우 스타일까지 모두 보여주면서 워드파일로 만들어야 할 일이 생겼다.

 

 
 

단, 주의 할 점은 모든 스타일은 인라인 스타일로 해야한다! 그것만 주의 하면 글꼴 스타일 빼고는 전부 css가 잘 적용되는거 같다!

​

팁) 아래의 html 코드로 page-break를 임의로 설정할 수 있다.

 

<div><pre><br clear=all style='page-break-after:always'></pre></div>

 

간단하게 작성 할 수 있다.

 

const createWord = (fileName, title) => {
  const header = "<html>" + "<head><meta charset='utf-8'></head><body>";
  const contents =
    '<div style="width: 595px; border: 1px solid #000000; color: #000000; align: start; min-height: 150px; overflow: auto; white-space: pre-line"><p>This is the initial <span style="background-color: rgb(236, 202, 250) !important; z-index: 100">content of the editor.</span><span style="background-color: rgb(0, 202, 250) !important;">content of the editor content of the editor content of the editor content of the editor content of the editor.</span></p></div>';
  const footer = "</body></html>";
  const sourceHTML = header + contents + footer;
  const source =
    "data:application/vnd.ms-word;charset=utf-8," +
    encodeURIComponent(sourceHTML);
  const fileDownload = document.createElement("a");
  document.body.appendChild(fileDownload);
  fileDownload.href = source;
  fileDownload.download = `${createTitle(fileName, title)}.doc`;
  fileDownload.click();
  document.body.removeChild(fileDownload);
  // document.body.removeChild(contents);
};

 

결과물

​

​

반응형
저작자표시

'javascript' 카테고리의 다른 글

[javascript] setTimeout , setInterval  (0) 2023.06.20
[JavaScript] 파일명에서 확장자 추출하기 🤔  (0) 2023.05.08
[JavaScript] 객체(Object)와 배열(Array)  (0) 2023.04.21
[JavaScript] JSON (JavaScript Object Notation-자바스크립트 객체 표기법) 🤔  (0) 2023.04.20
[JavaScript] localstorage 사용법과 stringify/parse 함수 🤔  (0) 2023.04.20
'javascript' Related Articles more
Comments