Di postingan blog pertama, kami membuat Google Docs seperti aplikasi web yang memiliki fitur berikut:
Pengeditan Teks Kaya (mengubah font teks, ukuran, warna, gaya (tebal, miring), perataan, dll.).
Pengeditan kolaboratif waktu-nyata dari dokumen yang sama. Banyak pengguna dapat mengakses dokumen secara bersamaan dan memodifikasinya.
Unggah konten Dokumen Word yang ada ke dalam editor. Dalam posting blog ini, kami akan memperluas aplikasi web kami untuk menyertakan fitur-fitur berikut:
Unduh konten editor sebagai dokumen MS Word, PDF, TXT atau HTML.
Bagikan URL dengan teman agar mereka dapat mengedit dokumen secara bersamaan. Produk akhir akan terlihat sebagai berikut:
Unduh Konten Editor As
Unduh Konten Editor sebagai Dokumen Microsoft Word
Pertama, kami menambahkan <input> elemen tipe kirim ke formulir kami untuk menampilkan tombol “Unduh Dokumen” di bagian depan. Kami menggunakan atribut asp-page-handler untuk menentukan handler tombol. Elemen formulir kami sekarang terlihat sebagai berikut:
<form method="post" enctype="multipart/form-data" id="uploadForm">
<input asp-for="UploadedDocument" />
<input type="submit" value="Upload Document" class="btn btn-primary" asp-page-handler="UploadDocument" />
<input type="submit" value="Download Document" class="btn btn-primary" asp-page-handler="DownloadDocument" />
<input asp-for="DocumentContent" type="hidden" />
</form>
Anda mungkin telah memperhatikan bahwa kami telah menambahkan lainnya<input> elemen bertipe tersembunyi. Elemen ini terikat ke properti DocumentContent di Index.cshtml.cs. Kami akan menggunakan properti ini untuk menyimpan konten editor sebagai string HTML.
[BindProperty]
public string DocumentContent { get; set; }
Firepad menyediakan acara lain disinkronkan untuk mendengarkan. Itu diaktifkan saat klien lokal kami mengedit dokumen dan saat pengeditan tersebut telah berhasil ditulis ke Firebase. Kami melampirkan callback ke jenis kejadian ini untuk menyetel nilai properti DocumentContent ke firepad.getHtml(). Harap tambahkan kode berikut di fungsi init() di Index.cshtml.
firepad.on('synced', function (isSynced) {
// isSynced will be false immediately after the user edits
// the pad, and true when their edit has been saved to Firebase.
if (isSynced) {
document.getElementById("DocumentContent").value = firepad.getHtml();
}
});
Sekarang kita mengimplementasikan fungsi handler OnPostDownloadDocument(). Kami menggunakan library GroupDocs.Editor untuk menyimpan konten editor sebagai dokumen Microsoft Word, yang disimpan di properti DocumentContent. Pawang mengembalikan dokumen Word sebagai tanggapan kepada pengguna.
public FileResult OnPostDownloadDocument()
{
// Editor object is referencing to the document initially uploaded for editing.
WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
Editor editor = new Editor(UploadedDocumentPath, delegate { return loadOptions; });
// <html>, <head> and <body> tags are missing in the HTML string stored in DocumentContent, so we are adding them manually.
string completeHTML = "<!DOCTYPE html><html><head><title></title></head><body>" + DocumentContent + "</body></html>";
EditableDocument document = EditableDocument.FromMarkup(completeHTML, null);
// Path to the output document
var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "DownloadedDocuments");
var outputPath = Path.Combine(projectRootPath, Path.GetFileName(UploadedDocumentPath));
// Save the Word Document at the outputPath
WordProcessingSaveOptions saveOptions = new WordProcessingSaveOptions(WordProcessingFormats.Docx);
editor.Save(document, outputPath, saveOptions);
// Return the Word Document as response to the User
var bytes = System.IO.File.ReadAllBytes(outputPath);
return new FileContentResult(bytes, new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.wordprocessingml.document"))
{
FileDownloadName = Path.GetFileName(UploadedDocumentPath)
};
}
Variabel UploadedDocumentPath didefinisikan sebagai volatile string untuk mempertahankan nilai jalur dokumen yang diunggah di antara sesi.
static volatile string UploadedDocumentPath;
public void OnPostUploadDocument()
{
var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "UploadedDocuments");
var filePath = Path.Combine(projectRootPath, UploadedDocument.FileName);
UploadedDocument.CopyTo(new FileStream(filePath, FileMode.Create));
// Retain the path of uploaded document between sessions.
UploadedDocumentPath = filePath;
ShowDocumentContentInTextEditor();
}
Silakan periksa artikel Simpan Dokumen dan Buat Dokumen yang Dapat Diedit dari file atau markup untuk mempelajari lebih lanjut tentang kelas GroupDocs.Editor. Jalankan proyek dan uji kasus penggunaan berikut:
- Unggah konten dokumen Word yang ada ke dalam editor dengan mengeklik tombol Unggah Dokumen.
- Buat perubahan yang diinginkan pada konten.
- Klik tombol Unduh Dokumen untuk mengunduh konten yang diperbarui sebagai Dokumen Word.
Unduh Konten Editor sebagai Dokumen PDF
Kita perlu membuat beberapa modifikasi di handler OnPostDownloadDocument() untuk mengembalikan dokumen PDF sebagai tanggapan. Kami menggunakan PdfSaveOptions alih-alih WordProcessingSaveOptions dan menggunakan application/pdf sebagai tipe MIME.
public FileResult OnPostDownloadDocument()
{
WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
Editor editor = new Editor(UploadedDocumentPath, delegate { return loadOptions; });
string completeHTML = "<!DOCTYPE html><html><head><title></title></head><body>" + DocumentContent + "</body></html>";
EditableDocument document = EditableDocument.FromMarkup(completeHTML, null);
var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "DownloadedDocuments");
var outputPath = Path.Combine(projectRootPath, Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".pdf");
PdfSaveOptions saveOptions = new PdfSaveOptions();
editor.Save(document, outputPath, saveOptions);
var bytes = System.IO.File.ReadAllBytes(outputPath);
return new FileContentResult(bytes, new MediaTypeHeaderValue("application/pdf"))
{
FileDownloadName = Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".pdf"
};
}
Unduh Konten Editor sebagai Dokumen Teks Biasa
Untuk mengembalikan dokumen teks biasa (.txt) sebagai respons, kami menggunakan kelas TextSaveOptions dan menggunakan text/plain sebagai tipe MIME.
public FileResult OnPostDownloadDocument()
{
WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
Editor editor = new Editor(UploadedDocumentPath, delegate { return loadOptions; });
string completeHTML = "<!DOCTYPE html><html><head><title></title></head><body>" + DocumentContent + "</body></html>";
EditableDocument document = EditableDocument.FromMarkup(completeHTML, null);
var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "DownloadedDocuments");
var outputPath = Path.Combine(projectRootPath, Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".txt");
TextSaveOptions saveOptions = new TextSaveOptions();
editor.Save(document, outputPath, saveOptions);
var bytes = System.IO.File.ReadAllBytes(outputPath);
return new FileContentResult(bytes, new MediaTypeHeaderValue("text/plain"))
{
FileDownloadName = Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".txt"
};
}
Bagikan URL Editor dengan teman
Kami harus memberi pengguna cara mudah untuk menyalin URL editor dan membagikannya dengan teman. Untuk melakukan ini, tambahkan <input> elemen tipe text di Index.cshtml.
<div>
<strong>
<label for="shareURL">Edit with Friends: </label>
</strong>
<input type="text" name="shareURL" id="shareURL" size="50">
</div>
Tambahkan di atas<div> elemen sebelum <div id="userlist"> tanda . Kami menetapkan nilai kolom input teks ini ke URL editor dengan menggunakan baris kode berikut. Tambahkan kode ini di fungsi init() di Index.cshtml.
document.getElementById("shareURL").value = window.location.origin + window.location.pathname + window.location.hash;
Kami akan membuat sedikit perubahan pada CSS kami untuk memastikan bahwa kolom input teks ditampilkan dengan benar. Setel posisi teratas firepad dan userlist ke 100px, dan tambahkan margin kiri ke kolom input teks.
#userlist {
position: absolute;
left: 0;
top: 100px;
bottom: 0;
height: auto;
width: 175px;
}
#firepad {
position: absolute;
left: 175px;
top: 100px;
bottom: 0;
right: 0;
height: auto;
}
#uploadForm {
margin: 16px 2px;
}
#shareURL {
margin-left: 123px;
}
Jalankan proyek, Anda akan melihat bidang teks yang memungkinkan Anda menyalin URL editor. Bagikan dengan teman Anda dan edit dokumen secara bersamaan dengan mereka. Kode sumber lengkap proyek tersedia di GitHub.
Lihat juga
*https://blog.conholdate.com/total/build-your-own-google-docs-like-app/