สร้าง Google Docs ของคุณเองเช่น App (ตอนที่ -II)

ใน โพสต์บล็อกแรก เราได้สร้าง Google เอกสารเช่นแอปพลิเคชันเว็บที่มีคุณสมบัติดังต่อไปนี้:

การแก้ไข Rich Text (เปลี่ยนแบบอักษร ขนาด สี สไตล์ (ตัวหนา ตัวเอียง) การจัดตำแหน่ง ฯลฯ)
การแก้ไขร่วมกันแบบเรียลไทม์ของเอกสารเดียวกัน ผู้ใช้หลายคนสามารถเข้าถึงเอกสารพร้อมกันและแก้ไขได้
อัปโหลดเนื้อหาของเอกสาร Word ที่มีอยู่ลงในโปรแกรมแก้ไข

ในบล็อกโพสต์นี้ เราจะขยายเว็บแอปพลิเคชันของเราให้มีคุณสมบัติดังต่อไปนี้:

ดาวน์โหลดเนื้อหาของโปรแกรมแก้ไขเป็นเอกสาร MS Word, PDF, TXT หรือ HTML
แบ่งปัน URL กับเพื่อน ๆ เพื่อให้พวกเขาสามารถแก้ไขเอกสารได้ในเวลาเดียวกัน

ผลิตภัณฑ์ขั้นสุดท้ายจะมีลักษณะดังนี้:

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็น
แบ่งปัน URL ของบรรณาธิการกับเพื่อน ๆ

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสาร Microsoft Word

ก่อนอื่นเราเพิ่ม <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> องค์ประกอบประเภทที่ซ่อนอยู่ องค์ประกอบนี้เชื่อมโยงกับคุณสมบัติ DocumentContent ใน Index.cshtml.cs เราจะใช้คุณสมบัตินี้เพื่อจัดเก็บเนื้อหาของตัวแก้ไขเป็นสตริง HTML

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

Firepad จัดให้มีอีกเหตุการณ์หนึ่งที่ซิงค์เพื่อการฟัง ซึ่งจะเริ่มทำงานเมื่อลูกค้าในพื้นที่ของเราแก้ไขเอกสาร และเมื่อการแก้ไขเหล่านั้นได้รับการเขียนไปยัง Firebase สำเร็จแล้ว เราแนบการเรียกกลับเข้ากับเหตุการณ์ประเภทนี้เพื่อตั้งค่าของคุณสมบัติ DocumentContent เป็น firepad.getHtml() โปรดเพิ่มโค้ดต่อไปนี้ในฟังก์ชัน init() ใน 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();
    }
});

ตอนนี้เราใช้ฟังก์ชันการทำงานของตัวจัดการ 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

เราจำเป็นต้องทำการแก้ไขเล็กน้อยในตัวจัดการ OnPostDownloadDocument() เพื่อส่งคืนเอกสาร PDF เป็นการตอบกลับ เราใช้ PdfSaveOptions แทน WordProcessingSaveOptions และใช้ application/pdf เป็นประเภท 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"
    };
}

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสารข้อความธรรมดา

ในการส่งคืนเอกสารข้อความธรรมดา (.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 ของโปรแกรมแก้ไขโดยใช้บรรทัดโค้ดต่อไปนี้ เพิ่มโค้ดนี้ในฟังก์ชัน init() ใน Index.cshtml

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

เราจะทำการเปลี่ยนแปลงเล็กน้อยใน CSS ของเราเพื่อให้แน่ใจว่าช่องป้อนข้อความจะแสดงอย่างถูกต้อง ตั้งค่าตำแหน่งบนสุดของ firepad และรายการผู้ใช้เป็น 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

ดูสิ่งนี้ด้วย

https://blog.conholdate.com/th/total/build-your-own-google-docs-like-app/

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสาร Microsoft Word#

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสาร PDF#

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสารข้อความธรรมดา#

แบ่งปัน URL ของบรรณาธิการกับเพื่อน ๆ#

ดูสิ่งนี้ด้วย#

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสาร Microsoft Word

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสาร PDF

ดาวน์โหลดเนื้อหาของตัวแก้ไขเป็นเอกสารข้อความธรรมดา

แบ่งปัน URL ของบรรณาธิการกับเพื่อน ๆ

ดูสิ่งนี้ด้วย