アプリのような独自のGoogleドキュメントを作成する(パート-II)

最初のブログ投稿では、次の機能を備えたウェブアプリのようなGoogleドキュメントを作成しました。

リッチテキスト編集(テキストのフォント、サイズ、色、スタイル(太字、斜体)、配置などを変更します)。
同じドキュメントのリアルタイムの共同編集。複数のユーザーが同時にドキュメントにアクセスして変更できます。
既存のWord文書のコンテンツをエディターにアップロードします。

このブログ投稿では、次の機能を含むようにWebアプリケーションを拡張します。

エディターのコンテンツをMSWord、PDF、TXT、またはHTMLドキュメントとしてダウンロードします。
URLを友達と共有して、友達が同時にドキュメントを編集できるようにします。

最終製品は次のようになります。

としてエディターのコンテンツをダウンロード
編集者のURLを友達と共有する

エディターのコンテンツをMicrosoftWordドキュメントとしてダウンロードする

まず、を追加します<input>タイプの要素をフォームに送信して、フロントエンドに[ドキュメントのダウンロード]ボタンを表示します。 asp-page-handler属性を使用して、ボタンのハンドラーを指定します。フォーム要素は次のようになります。

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

別のを追加したことに気づいたかもしれません<input>タイプの要素は非表示です。この要素は、Index.cshtml.csのDocumentContentプロパティにバインドされています。このプロパティを使用して、エディターのコンテンツをHTML文字列として保存します。

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

Firepadは、リスニング用に同期された別のイベントを提供します。ローカルクライアントがドキュメントを編集し、それらの編集がFirebaseに正常に書き込まれたときに発生します。 DocumentContentプロパティの値をfirepad.getHtml()に設定するために、このイベントタイプにコールバックをアタッチします。 Index.cshtmlのinit()関数に次のコードを追加してください。

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

次に、OnPostDownloadDocument()ハンドラーの機能を実装します。 GroupDocs.Editorライブラリを使用して、エディターのコンテンツをMicrosoft Wordドキュメントとして保存し、DocumentContentプロパティに保存します。ハンドラーは、ユーザーへの応答としてWord文書を返します。

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変数は、セッション間でアップロードされたドキュメントパスの値を保持するための揮発性文字列として定義されます。

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クラスの詳細については、ドキュメントの保存およびファイルまたはマークアップからの編集可能なドキュメントの作成の記事を確認してください。

プロジェクトを実行し、次のユースケースをテストします。

[ドキュメントのアップロード]ボタンをクリックして、既存のWordドキュメントのコンテンツをエディターにアップロードします。
コンテンツに必要な変更を加えます。
[ドキュメントのダウンロード]ボタンをクリックして、更新されたコンテンツをWordドキュメントとしてダウンロードします。

エディターのコンテンツをPDFドキュメントとしてダウンロードする

PDFドキュメントを応答として返すには、OnPostDownloadDocument()ハンドラーにいくつかの変更を加える必要があります。 WordProcessingSaveOptionsの代わりにPdfSaveOptionsを使用し、MIMEタイプとしてapplication/pdfを使用します。

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

エディターのコンテンツをプレーンテキストドキュメントとしてダウンロードする

プレーンテキストドキュメント(.txt)を応答として返すために、TextSaveOptionsクラスを使用し、テキスト/プレーンを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"
    };
}

編集者のURLをコピーして友達と共有する便利な方法をユーザーに提供する必要があります。これを行うには、を追加します<input>Index.cshtmlのテキストタイプの要素。

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

上記のを追加<div>前の要素<div id="userlist"> タグ。次のコード行を使用して、このテキスト入力フィールドの値をエディターのURLに設定します。このコードをIndex.cshtmlのinit()関数に追加します。

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

テキスト入力フィールドが正しく表示されるように、CSSに小さな変更を加えます。ファイアパッドとユーザーリストの上部の位置を100pxに設定し、テキスト入力フィールドに左マージンを追加します。

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

プロジェクトを実行すると、エディターのURLをコピーできるテキストフィールドが表示されます。友達と共有し、同時にドキュメントを編集します。

プロジェクトの完全なソースコードはGitHubで入手できます。

エディターのコンテンツをMicrosoftWordドキュメントとしてダウンロードする#

エディターのコンテンツをPDFドキュメントとしてダウンロードする#

エディターのコンテンツをプレーンテキストドキュメントとしてダウンロードする#

編集者のURLを友達と共有する#

関連項目#

エディターのコンテンツをMicrosoftWordドキュメントとしてダウンロードする

エディターのコンテンツをPDFドキュメントとしてダウンロードする

エディターのコンテンツをプレーンテキストドキュメントとしてダウンロードする

編集者のURLを友達と共有する

関連項目