Hai, Habr.
Saya ingin berbicara tentang utilitas bernama DocumentBuilder, yang memungkinkan Anda untuk menghasilkan dokumen, tabel, dan presentasi, dan juga menunjukkan bagaimana Anda dapat menggunakannya untuk menyelesaikan masalah Anda, menggunakan contoh membuat resume dari template.
Builder berfungsi sebagai berikut: Anda menulis kode dalam js menggunakan metode khusus dari dokumentasi, memberikannya ke utilitas, dan mengumpulkan dokumen. Atau tidak mengumpulkan jika ada kesalahan.
Menggunakan pembangun disarankan jika Anda ingin menyelesaikan tugas-tugas dari jenis berikut:
- Anda perlu membuat banyak dokumen dengan variasi kecil atau dokumen berdasarkan banyak data.
- Anda perlu mengintegrasikan pembuatan dokumen dalam layanan apa pun.
Ada layanan yang memungkinkan Anda membuat resume: pengguna mengisi kolom yang diperlukan, dan sistem membuat dokumen dan memberikannya kepada pengguna. Ini akan menjadi contoh cara menggunakan pembangun.
Sebagai alat saya akan menggunakan Node.js (express).
Rencana:
- Pengguna memasukkan data ke dalam formulir di halaman di browser, formulir dikirim ke server.
- Di server Node.js, ia membuat skrip untuk pembuat berdasarkan data pengguna.
- Node.js memberikan skrip ke pembangun.
- Pembangun membuat dokumen menggunakan skrip.
- Node.js mengembalikan tautan ke dokumen ke pengguna.
Pertama, buat formulir di mana pengguna akan memasukkan data mereka. Formulir ini akan memiliki 8 bidang: "Nama lengkap", "Nomor telepon", "email", "profil", "gelar", "universitas", "lokasi", "tahun", "keterampilan". Bidang keterampilan dapat dikloning.
Buat file index.html dan tambahkan kode templat ke dalamnya.
<div class="fill-name"> <input type="text" id="fill-name" placeholder="full name"> </div> <div class="phone-number"> <input type="number" id="phone-number" placeholder="phone number"> </div> <div class="email"> <input type="text" id="email" placeholder="email"> </div> <div class="profile"> <textarea id="profile" placeholder="Insert a brief description of yourself"></textarea> </div> <div class="education"> <input type="text" id="degree" placeholder="degree"> <input type="text" id="university" placeholder="university"> <input type="text" id="location" placeholder="location"> <input type="date" id="year" placeholder="year"> </div> <div class="skills"> <div class="skill"> <input type="text" id="new-skill" placeholder="skill" onkeyup="add_skill_by_enter(event)"> <button onclick="add_skill()">+</button> </div> </div>
Di sini saya menggunakan dua fungsi: add_skill_by_enter (event) dan add_skill (). Mereka diperlukan untuk menambahkan beberapa bidang dengan menekan tombol + atau Enter. Saya akan menjelaskan fungsi-fungsi ini sedikit kemudian.
Tambahkan tombol untuk mengirimkan formulir ke server:
<button onclick="sendForm()">Send</button>
Sekarang kita akan menulis fungsi untuk bekerja dengan formulir.
Fungsi pertama adalah add_skill ()
add_skill = () => { const newSkill = document.getElementById("new-skill"); if (newSkill.value === '') {return; }
Kami menambahkan fungsi sederhana untuk mengumpulkan data dari bidang dan mengirimkannya ke server.
get_skill_values = () => { const skills = []; if (document.getElementById('new-skill').value !== '') { skills.push(document.getElementById('new-skill').value); } Array.from(document.getElementsByClassName('skillfield')).forEach(current_element => { skills.push(current_element.innerHTML); }); return skills; }; sendForm() sendForm = () => { fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userData: { fillName: document.getElementById('fill-name').value, phoneNumber: document.getElementById('phone-number').value, email: document.getElementById('email').value, profile: document.getElementById('profile').value, education: { degree: document.getElementById('degree').value, university: document.getElementById('university').value, location: document.getElementById('location').value, year: document.getElementById('year').value, }, skills: get_skill_values() } }) }).then(res => res.json()) .then(response => { location.replace('/' + response.filename);
Saya menulis bagian server di express. Koneksi semua perpustakaan, konfigurasi server dan deskripsi metode get and post terlihat seperti ini:
const path = require('path'); const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.get('/', (req, res) => { res.sendFile(path.join(__dirname + '/index.html')); }); app.post('/', (req, res) => {
Jalankan express:
node main.js
Buka alamat di browser:
http:localhost:3000
Kami melihat formulir yang dibuat. Kami mengisinya dengan data acak:
Kami mendapatkan json berikut:
{"userData":{"fillName":"Rotatyy Dmitryi","phoneNumber":"89879879898","email":"flamine@list.ru","profile":"Hi, my name is Joe\nAnd I work in a button factory\nI got a wife and two kids\nOne day, my boss says, “Joe, are you busy?”\nI said, “no”\n“Then push this button with your right hand”","country":"Russia","city":"Nizhniy Novgorod","education":{"degree":"Master of Pupets","university":"Nizhny novgorod state technical university","location":"Nizhniy Novgorod","year":"2015-05-02"},"skills":["apple.js","vintage.js","zerg.js","css","html","linux"]}};
Sekarang Anda perlu menulis skrip untuk pembangun. Saya mengambil sebagai dasar templat yang ditawarkan Google Documents (resume templat).
Template ini terlihat seperti ini:
Menggunakan data dan templat ini, Anda perlu membuat skrip yang dengannya pembuat akan membuat dokumen.
Ada beberapa opsi untuk melakukan hal ini, dan yang paling sederhana adalah mengunduh versi desktop dari editor ONLYOFFICE dan menulis makro yang akan membuat dokumen menggunakan data. Dan kemudian tambahkan ke makro pembuatan dan penyimpanan file - Anda mendapatkan skrip untuk pembangun. Ini akan berfungsi karena makro dan pembangun menggunakan API yang sama.
Membuat skrip untuk pembangun
Kami mulai dengan menginisialisasi objek halaman dan menambahkan data yang berasal dari pengguna:
const Document = Api.GetDocument(); const data = {"userData":{"fillName":"Rotatyy Dmitryi","phoneNumber":"89879879898","email":"flamine@list.ru","profile":"Hi, my name is Joe\nAnd I work in a button factory\nI got a wife and two kids\nOne day, my boss says, “Joe, are you busy?”\nI said, “no”\n“Then push this button with your right hand”","country":"Russia","city":"Nizhniy Novgorod","education":{"degree":"Master of Pupets","university":"Nizhny novgorod state technical university","location":"Nizhniy Novgorod","year":"2015-05-02"},"skills":["apple.js","vintage.js","zerg.js","css","html","linux"]}};
Sekarang Anda perlu menambahkan paragraf dengan nama pengguna lengkap. Itu ditulis dalam huruf tebal, dan paragraf ini memiliki spasi baris 1,15.
let paragraph = document.GetElement(0);
Kami juga menambahkan paragraf yang tersisa: Dengan menjalankan skrip ini, kami mendapatkan dokumen berikut:
Sekarang saatnya menambahkan fitur untuk menulis kode skrip ke file dan menghasilkan dokumen.
Kami membuat skrip -> menulis ke file -> memberikan file ke pembangun -> mengembalikan tautan ke file ke pengguna.
Kami menambahkan koneksi add-on untuk bekerja dengan file dan menjalankan perintah menggunakan Node.js, dan juga membuat folder "publik" dan menjadikannya publik:
const {exec} = require('child_process'); const fs = require('fs'); app.use(express.static('public'));
Fungsi untuk menghasilkan teks dengan skrip akan sangat sederhana - hanya akan mengembalikan string dengan semua kode untuk pembuat, sambil menambahkan data pengguna. Penting untuk menambahkan karakter pemisah baris di akhir setiap baris, jika tidak, tidak ada yang akan berhasil.
generate_script = (data) => { let first_template = 'builder.CreateFile("docx");\n' + 'const Document = Api.GetDocument();\n'; first_template += 'const data = ' + JSON.stringify(data) + ';\n'; first_template += 'let paragraph = Document.GetElement(0);\n' + 'FullName_style = Document.CreateStyle("FullName");\n' + .... ~~~~~~~~~~~ return first_template; };
Sekarang Anda perlu menulis skrip ke file dan memberikannya kepada pembangun. Faktanya, semua pekerjaan dengan builder akan direduksi menjadi fakta bahwa kita perlu mengeksekusi perintah documentbuilder path/script.js Node.js
Kami menulis fungsi build yang akan melakukan ini:
build = (data, res) => { const filename = Math.random().toString(36).substring(7) + '.docx';
Tambahkan panggilan ke metode build (req.body, res); saat mengirim permintaan
app.post('/', (req, res) => { build(req.body, res); });
Dan kamu sudah selesai. Untuk berjaga-jaga, saya memposting kode contoh lengkap di sini .
Jadi Anda dapat menanamkan ONLYOFFICE DocumentBuilder di aplikasi web.
Saya berharap bahwa meskipun banyak penyederhanaan, semuanya jelas. Saya hanya menggunakan kode minimum yang diperlukan untuk menunjukkan cara kerja semuanya.
Saat ini, ada pemikiran untuk menyelesaikan utilitas dan memperluas berbagai masalah yang harus dipecahkan. Saya akan berterima kasih jika Anda berbagi kasus nyata menghasilkan dokumen (tentu saja, tabel dengan presentasi, tentu saja, juga) di komentar atau di PM.