İlk blog gönderisinde, aşağıdaki özelliklere sahip bir Google Dokümanlar benzeri web uygulaması oluşturduk:

  • Zengin Metin Düzenleme (metnin yazı tipini, boyutunu, rengini, stilini (kalın, italik), hizalamasını vb. değiştirin).
  • Aynı belgenin gerçek zamanlı ortak düzenlemesi. Birden fazla kullanıcı aynı anda belgeye erişebilir ve üzerinde değişiklik yapabilir.
  • Mevcut bir Word Belgesinin içeriğini bir düzenleyiciye yükleyin.

Bu blog yazısında web uygulamamızı aşağıdaki özellikleri içerecek şekilde genişleteceğiz:

  • Düzenleyicinin içeriğini MS Word, PDF, TXT veya HTML belgesi olarak indirin.
  • Belgeyi aynı anda düzenleyebilmeleri için URL’yi arkadaşlarınızla paylaşın.

Nihai ürün aşağıdaki gibi görünecektir:

Google Dokümanlar Uygulama Arayüzü gibi

Editörün İçeriğini Microsoft Word Belgesi Olarak İndirin

İlk önce bir ekliyoruz<input> türündeki öğe, ön uçta “Belgeyi İndir” düğmesini gösterecek şekilde formumuza gönderilir. Düğmenin işleyicisini belirtmek için asp-page-handler özelliğini kullanırız. Form öğemiz artık aşağıdaki gibi görünüyor:

<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>

Bir tane daha eklediğimizi fark etmiş olabilirsiniz. ` türündeki öğe gizli. Bu öğe Index.cshtml.cs’deki DocumentContent özelliğine bağlıdır. Bu özelliği, düzenleyicinin içeriğini bir HTML dizesi olarak depolamak için kullanacağız.

[BindProperty]
public string DocumentContent { get; set; }

Firepad dinleme için senkronize edilmiş başka bir etkinlik sağlar. Yerel müşterimiz belgeyi düzenlediğinde ve bu düzenlemeler başarıyla Firebase’e yazıldığında tetiklenir. DocumentContent özelliğinin değerini firepad.getHtml() olarak ayarlamak için bu olay türüne bir geri çağrı ekliyoruz. Lütfen aşağıdaki kodu Index.cshtml’deki init() işlevine ekleyin.

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();
    }
});

Şimdi OnPostDownloadDocument() işleyicisinin işlevselliğini uyguluyoruz. Editörün içeriğini DocumentContent özelliğinde saklanan Microsoft Word belgesi olarak kaydetmek için GroupDocs.Editor kütüphanesini kullanıyoruz. İşleyici, kullanıcıya yanıt olarak Word belgesini döndürür.

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)
    };
}

UploadedDocumentPath değişkeni, yüklenen belge yolunun değerini oturumlar arasında tutmak için geçici bir dize olarak tanımlanır.

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();
}

GroupDocs.Editor sınıfları hakkında daha fazla bilgi edinmek için lütfen [Belgeyi Kaydet8 ve Dosyadan veya işaretlemeden DüzenlenebilirDocument Oluştur makalelerine göz atın.

Projeyi çalıştırın ve aşağıdaki kullanım senaryosunu test edin:

  1. Belgeyi Yükle düğmesini tıklatarak mevcut bir Word belgesinin içeriğini bir düzenleyiciye yükleyin.
  2. İçerikte istediğiniz değişiklikleri yapın.
  3. Güncellenen içeriği Word Belgesi olarak indirmek için Belgeyi İndir düğmesine tıklayın.

Editörün İçeriğini PDF Belgesi Olarak İndirin

PDF belgesini yanıt olarak döndürmek için OnPostDownloadDocument() işleyicisinde birkaç değişiklik yapmamız gerekiyor. WordProcessingSaveOptions yerine PdfSaveOptions kullanıyoruz ve MIME türü olarak application/pdf kullanıyoruz.

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"
    };
}

Editörün İçeriğini Düz Metin Belgesi Olarak İndirin

Yanıt olarak düz metin belgesi (.txt) döndürmek için TextSaveOptions sınıfını ve MIME türü olarak text/plain’i kullanırız.

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"
    };
}

Bir Düzenleyicinin URL’sini arkadaşlarınızla paylaşın

Kullanıcılara bir editörün URL’sini kopyalayıp arkadaşlarıyla paylaşmanın kolay bir yolunu sunmalıyız. Bunu yapmak için bir ` ekleyin ’ Index.cshtml’deki metin türü öğesi.

<div>
    <strong>
        <label for="shareURL">Edit with Friends: </label>
    </strong>
    <input type="text" name="shareURL" id="shareURL" size="50">
</div>

Yukarıdakileri ekleyin <div> önceki öğe` ’ etiketi. Bu metin giriş alanının değerini aşağıdaki kod satırını kullanarak bir editörün URL’sine ayarladık. Bu kodu Index.cshtml’deki init() fonksiyonuna ekleyin.

document.getElementById("shareURL").value = window.location.origin + window.location.pathname + window.location.hash;

Metin giriş alanının düzgün şekilde gösterilmesini sağlamak için CSS’mizde küçük değişiklikler yapacağız. Firepad’in ve kullanıcı listesinin üst konumunu 100 piksel olarak ayarlayın ve metin giriş alanına bir sol kenar boşluğu ekleyin.

#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;
}

Projeyi çalıştırın, düzenleyicinin URL’sini kopyalamanıza izin veren bir metin alanı görmelisiniz. Arkadaşlarınızla paylaşın ve belgeyi onlarla aynı anda düzenleyin.

Projenin tam kaynak kodu GitHub adresinde mevcuttur.

Ayrıca bakınız