docx.브라우저에서 MS Word 파일이 작성될 때까지 js 사용
8011 단어 JavaScriptdocxdocx.js
개요
Word 파일(.docx)을 쓰기 위한 라이브러리 docx입니다.브라우저로 js를 이동하려면
https://docx.js.org/
브라우저도 정식으로 시작할 수 있지만 기본적으로 문서의 샘플은 모두 node입니다.js를 기반으로 한 데다가 제 기술이 부족해서 의외로 반했어요. 그래서 저는 모든 절차를 다 적어 놓을게요.
주안점
절차.
npm의 초기화.대화에서 들을 수 있는 설정을 적당히 설정합니다.하지만 여기 이름은 docx라고 부르지 마세요.나중에 이름 충돌로 진행이 불가능할 겁니다.npm init
docx 설치npm install docx --save-dev
웹 패키지 설치npm install webpack webpack-cli --save-dev
HTML 준비
대체로 다음과 같은 느낌으로 웹 패키지로 다음에 쓰기 시작한 docx_browser.js와 FileSaver를 불러오고 버튼으로 부르는 방법generate()을 불러옵니다.
index.html<html>
<head>
<meta charset="utf-8">
<title>docx sample</title>
<!-- script by webpack -->
<script src="docx_browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
</head>
<body>
<h1>docx sample</h1>
<button onclick="generate()">Generate DOCX</button>
</body>
</html>
js의 준비
https://docx.js.org/#/?id=basic-usage
여기를 참고하여 아래 내용을 변경합니다(변경처의 평론이 추가되었습니다)
npm init
npm install docx --save-dev
npm install webpack webpack-cli --save-dev
<html>
<head>
<meta charset="utf-8">
<title>docx sample</title>
<!-- script by webpack -->
<script src="docx_browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
</head>
<body>
<h1>docx sample</h1>
<button onclick="generate()">Generate DOCX</button>
</body>
</html>
import * as fs from "fs";function generate()를 호출할 수 있도록 전역 함수의 명령을 전역 함수generate()./src/main.js//不要コメントアウト
//import * as fs from "fs";
import { Document, Packer, Paragraph, TextRun } from "docx";
//全体をfunctionで囲む
function generate() {
// Create document
const doc = new Document();
// Documents contain sections, you can have multiple sections per document, go here to learn more about sections
// This simple example will only contain one section
doc.addSection({
properties: {},
children: [
new Paragraph({
children: [
new TextRun("Hello World"),
new TextRun({
text: "Foo Bar",
bold: true,
}),
new TextRun({
text: "\tGithub is the best",
bold: true,
}),
],
}),
],
});
// Used to export the file into a .docx file
//ブラウザ動作用に書き換え
/*
Packer.toBuffer(doc).then((buffer) => {
fs.writeFileSync("My Document.docx", buffer);
});
*/
//以下ブラウザ動作用
Packer.toBlob(doc).then((blob) => {
saveAs(blob, "output.docx");
console.log("Document created successfully");
});
}
//グローバル関数にする
window.generate = generate;
npx webpack --mode development ./src/main.js --output docx_browser.js
실행 결과
브라우저에 표시
나열된 Word 파일
작업 환경
덤
같은 이름의 프로그램 라이브러리도 몇 개 있고, 그 일본어 문장도 처리했지만, 여기에 소개된 것은 유일하게 유지보수된 것이다.
유지 보수가 중지된 다른 라이브러리
https://github.com/MrRio/DOCX.js
https://github.com/stephen-hardy/DOCX.js
다른 사용 가능한 라이브러리 (아직 시도하지 않음)
https://github.com/guigrpa/docx-templates
템플릿 파일을 다시 쓰는 방법으로 생성합니다.
Reference
이 문제에 관하여(docx.브라우저에서 MS Word 파일이 작성될 때까지 js 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tsunet111/items/24000505e8d220b42dae
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(docx.브라우저에서 MS Word 파일이 작성될 때까지 js 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tsunet111/items/24000505e8d220b42dae텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
