Membuat Generator Dokumen

Banyak UMKM membutuhkan dokumen seperti MOU, surat kuasa, surat pernyataan, invoice, dan dokumen bisnis lainnya. Namun tidak semua pelaku usaha bisa membuat format dokumen yang rapi dan profesional.

Karena itu, generator dokumen berbasis web menjadi solusi cepat dan praktis: pengguna cukup mengisi form, lalu dokumen otomatis dibuat dalam bentuk PDF atau DOC.

1. Struktur Dasar Generator Dokumen

index.html
css/
  generator-style.css
js/
  generator.js
templates/
  template-mou.html
  template-surat-kuasa.html

2. Membuat Form Input Data

<form id="docForm">
  <label>Nama Pihak Pertama</label>
  <input type="text" id="pihak1" />

  <label>Nama Pihak Kedua</label>
  <input type="text" id="pihak2" />

  <label>Deskripsi Perjanjian</label>
  <textarea id="deskripsi"></textarea>

  <button type="button" onclick="generateDoc()">Preview Dokumen</button>
</form>

3. Membuat Template Dokumen HTML

<div id="docTemplate" style="padding: 20px;">
  <h2 style="text-align:center;">SURAT PERJANJIAN</h2>

  <p>Pihak Pertama: <span id="tPihak1"></span></p>
  <p>Pihak Kedua: <span id="tPihak2"></span></p>

  <h3>Isi Kesepakatan</h3>
  <p id="tDesk"></p>
</div>

4. Mengisi Template dengan JavaScript

// generator.js
function generateDoc() {
  document.getElementById("tPihak1").innerText = pihak1.value;
  document.getElementById("tPihak2").innerText = pihak2.value;
  document.getElementById("tDesk").innerText = deskripsi.value;

  document.getElementById("preview").style.display = "block";
}

5. Export ke PDF (html2pdf.js)

// Export PDF
function exportPDF() {
  const element = document.getElementById("docTemplate");
  html2pdf().from(element).save("dokumen.pdf");
}

6. Export ke DOCX (docx.js)

// Export DOCX
function exportDOC() {
  const doc = new docx.Document({
    sections: [{
      children: [
        new docx.Paragraph("SURAT PERJANJIAN"),
        new docx.Paragraph("Pihak Pertama: " + pihak1.value),
        new docx.Paragraph("Pihak Kedua: " + pihak2.value),
        new docx.Paragraph(deskripsi.value)
      ]
    }]
  });

  docx.Packer.toBlob(doc).then(blob => {
    saveAs(blob, "dokumen.docx");
  });
}

7. Menambahkan Tombol Download

<button onclick="exportPDF()">Download PDF</button>
<button onclick="exportDOC()">Download DOC</button>

8. Best Practice Generator Dokumen

• Gunakan template terpisah agar mudah di-maintain.
• Pastikan format dokumen clean dan formal.
• Beri preview sebelum download.
• Simpan hasil input ke localStorage agar tidak hilang.
• Gunakan font standar untuk keseragaman dokumen.

Dengan menggunakan pendekatan di atas, Anda bisa membuat generator dokumen yang profesional, cepat, dan sangat berguna untuk UMKM yang sering membutuhkan dokumen legal secara instan.