Bouw je eigen Google Docs-achtige app (deel -II)

In de [eerste blogpost][1] hebben we een Google Docs-achtige webapp gemaakt met de volgende functies:

Rich Text Editing (lettertype, grootte, kleur, stijl (vet, cursief), uitlijning enz.) wijzigen.
Realtime gezamenlijke bewerking van hetzelfde document. Meerdere gebruikers hebben tegelijkertijd toegang tot het document en kunnen het wijzigen.
Upload inhoud van een bestaand Word-document naar een editor. In deze blogpost breiden we onze webapplicatie uit met de volgende functies:
Download inhoud van de editor als MS Word-, PDF-, TXT- of HTML-document.
Deel de URL met vrienden zodat ze het document tegelijkertijd kunnen bewerken. Het uiteindelijke product ziet er als volgt uit:
Download inhoud van de editor als
[Microsoft Word-document][2]
[PDF-document][3]
[Document met platte tekst][4]
[Deel URL van een editor met vrienden][5]

Download de inhoud van de editor als Microsoft Word-document

Eerst voegen we een **toe<input>**element van het type verzend naar ons formulier om de knop “Document downloaden” aan de voorkant weer te geven. We gebruiken het kenmerk asp-page-handler om de handler van de knop te specificeren. Ons formulierelement ziet er nu als volgt uit:

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

Het is je misschien opgevallen dat we nog een hebben toegevoegd<input> element van het type verborgen. Dit element is gebonden aan de eigenschap DocumentContent in Index.cshtml.cs. We zullen deze eigenschap gebruiken om de inhoud van de editor op te slaan als een HTML-string.

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

[Firepad][6] biedt een andere gebeurtenis gesynchroniseerd om naar te luisteren. Het wordt geactiveerd wanneer onze lokale client het document bewerkt en wanneer die bewerkingen met succes naar Firebase zijn geschreven. We koppelen een callback aan dit gebeurtenistype om de waarde van de eigenschap DocumentContent in te stellen op firepad.getHtml(). Voeg de volgende code toe aan de functie init() in 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();
    }
});

Nu implementeren we de functionaliteit van OnPostDownloadDocument() handler. We gebruiken de bibliotheek [GroupDocs.Editor][7] om de inhoud van de editor op te slaan als Microsoft Word-document, die wordt opgeslagen in de eigenschap DocumentContent. De handler retourneert het Word-document als antwoord aan de gebruiker.

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

De variabele UploadedDocumentPath wordt gedefinieerd als een vluchtige string om de waarde van het geüploade documentpad tussen sessies te behouden.

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

Raadpleeg de artikelen [Document opslaan][8] en [Create EditableDocument from file or markup][9] voor meer informatie over GroupDocs.Editor-klassen. Voer het project uit en test de volgende use case:

Upload de inhoud van een bestaand Word-document naar een editor door op de knop Document uploaden te klikken.
Breng de gewenste wijzigingen aan in de inhoud.
Klik op de knop Document downloaden om de bijgewerkte inhoud als Word-document te downloaden.

Download de inhoud van de editor als PDF-document

We moeten een paar wijzigingen aanbrengen in de OnPostDownloadDocument()-handler om een PDF-document als antwoord te retourneren. We gebruiken [PdfSaveOptions][10] in plaats van [WordProcessingSaveOptions][11] en gebruiken application/pdf als een MIME-type.

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

Download de inhoud van de editor als document met platte tekst

Om een document met platte tekst (.txt) als antwoord te retourneren, gebruiken we de klasse [TextSaveOptions][12] en gebruiken we text/plain als een MIME-type.

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

We moeten gebruikers een gemakkelijke manier bieden om de URL van een editor te kopiëren en deze met vrienden te delen. Voeg hiervoor een toe<input> element van type tekst in Index.cshtml.

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

Voeg bovenstaande toe<div> element voor <div id="userlist"> tag. We stellen de waarde van dit tekstinvoerveld in op de URL van een editor door de volgende regel code te gebruiken. Voeg deze code toe in de functie init() in Index.cshtml.

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

We zullen kleine wijzigingen aanbrengen in onze CSS om ervoor te zorgen dat het tekstinvoerveld correct wordt weergegeven. Stel de bovenste positie van firepad en gebruikerslijst in op 100px en voeg een linkermarge toe aan het tekstinvoerveld.

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

Voer het project uit, u zou een tekstveld moeten zien waarmee u de URL van de editor kunt kopiëren. Deel het met je vrienden en bewerk het document tegelijkertijd met hen. De volledige broncode van het project is beschikbaar op [GitHub][13].

Zie ook

*https://blog.conholdate.com/total/build-your-own-google-docs-like-app/ [1]: https://blog.conholdate.com/total/build-your-own-google-docs-like-app/ [2]: #Download-Content-As-MS-Word [3]: #Download-Content-As-PDF [4]: #Download-Content-As-Plain-Text-Document [5]: #Share-URL-With-Friends [6]: https://firepad.io/docs/ [7]: https://products.groupdocs.com/editor/net/ [8]: https://docs.groupdocs.com/editor/net/save-document/ [9]: https://docs.groupdocs.com/editor/net/create-editabledocument-from-file-or-markup/ [10]: https://apireference.groupdocs.com/editor/net/groupdocs.editor.options/pdfsaveoptions/ [11]: https://apireference.groupdocs.com/editor/net/groupdocs.editor.options/wordprocessingsaveoptions/ [12]: https://apireference.groupdocs.com/editor/net/groupdocs.editor.options/textsaveoptions/ [13]: https://github.com/sohail-aspose/GoogleDocsLite

Download de inhoud van de editor als Microsoft Word-document#

Download de inhoud van de editor als PDF-document#

Download de inhoud van de editor als document met platte tekst#

Deel de URL van een editor met vrienden#

Zie ook#

Download de inhoud van de editor als Microsoft Word-document

Download de inhoud van de editor als PDF-document

Download de inhoud van de editor als document met platte tekst

Deel de URL van een editor met vrienden

Zie ook