Редактировать документы стало проще: текстовый процессор Syncfusion + Wisej

Проблема, с которой мы сталкиваемся при работе над проектами модернизации настольных приложений, связана с локальным доступом к файлам. Веб-проекты имеют совершенно другой подход к работе с пользовательскими файлами, который не предусматривает неограниченный доступ к файловой системе клиента. До недавнего времени, если вы хотели изменить файл в файловой системе клиента, вам приходилось проходить через традиционные диалоги загрузки и загрузки, в результате чего один и тот же документ несколько раз оказывался в папке загрузок.

С появлением интеграции Wisej Syncfusion Essential Studio JS и API клиентской файловой системы работа с локальными пользовательскими файлами стала проще простого. В этом сообщении блога мы покажем несколько различных способов интеграции документов Word в элемент управления JS 2 Word Processor.

Первый подход использует файловую систему сервера. Второй подход демонстрирует интеграцию с использованием расширения клиентской файловой системы Wisej.

О Wisej

Wisej — это мощная веб-инфраструктура SPA для разработчиков C# и VB.NET. Это помогает нам перенести существующие приложения WinForms, VB6 и Visual Web GUI в модернизированное кросс-платформенное решение с минимальными изменениями кода. Мы можем легко перенести существующие элементы управления Syncfusion для настольных компьютеров на их соответствующие веб-эквиваленты без необходимости полностью переписывать приложение. Wisej имеет идеальный до пикселя дизайнер WYSIWYG, который помогает нам перетаскивать элементы управления, назначать свойства и присоединять события одним нажатием кнопки. Горячая перезагрузка и мощная система тем позволяют разработчикам видеть изменения в режиме реального времени.

Если вы никогда раньше не использовали Wisej, вы можете получить его здесь.

Начиная

Чтобы использовать текстовый процессор JS 2 в Wisej, нам нужно добавить в проект несколько библиотек Syncfusion:

  • Syncfusion.Compression.Base
  • Syncfusion.DocIO.Base
  • Syncfusion.EJ2.DocumentEditor
  • Syncfusion.Лицензирование
  • Syncfusion.OfficeChart.Base

Мы можем легко получить эти библиотеки с веб-сайта Syncfusion.

Вы можете скачать полный демонстрационный проект здесь.

Получение документов на сервере

Мы можем извлекать документы из файловой системы сервера и отображать их в браузере клиента с помощью нескольких простых вызовов в Wisej.

Для начала загрузите документ Word в поток.

var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open);

Как только файл находится в потоке, его можно загрузить в экземпляр WordDocument(Syncfusion. EJ2.DocumentEditor.WordDocument):

using (var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open))
{
  var document = WordDocument.Load(stream, FormatType.Docx);
}

Мы можем сериализовать экземпляр WordDocument, чтобы получить соответствующую строку Syncfusion Document Text ( SFDT).

using (var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open))
{
  var document = WordDocument.Load(stream, FormatType.Docx);
  var sfdt = JsonConvert.SerializeObject(document);
}

Получив SFDT, мы можем добавить текстовый процессор Syncfusion (documentEditor в коде) из панели инструментов Wisej и загрузить текст в виджет.

Совет. Если элемент управления DocumentEditor отсутствует на панели инструментов, вы можете щелкнуть панель инструментов правой кнопкой мыши, выбрать элементы и выбрать Wisej.Web.Ext.Syncfusion2.dll.

using (var stream = new FileStream(Application.MapPath("Some/Location/In/My/App.docx"), FileMode.Open))
{
  var document = WordDocument.Load(stream, FormatType.Docx);
  var sfdt = JsonConvert.SerializeObject(document);
  this.documentEditor1.OpenFile(sfdt);
}

Получение документов от клиента

Мы можем получить документы из файловой системы клиента и показать их в приложении Wisej без традиционного диалога загрузки.

Для начала добавьте в проект расширение Wisej.Ext.ClientFileSystem.

После добавления расширения приложение Wisej может получить доступ к каталогам в локальной файловой системе через API доступа к файловой системе браузера.

Важно отметить, что разрешения на чтение и запись должны быть предоставлены для каждого каталога (если только член более высокого уровня иерархии каталога уже не одобрил доступ). Доступ к файлу аннулируется при обновлении страницы, поэтому важно снова запросить доступ.

// get a directory from the client. 
var directoryHandle = await ClientFileSystem.ShowDirectoryPickerAsync();   

// get the files from that directory. 
var fileHandles = await directoryHandle.GetFilesAsync("*.docx");

После извлечения файлов можно запросить содержимое файла.

// get a directory from the client. 
var directoryHandle = await ClientFileSystem.ShowDirectoryPickerAsync();   

// get the files from that directory. 
var fileHandles = await directoryHandle.GetFilesAsync("*.docx"); 
if (fileHandles.Length > 0) 
{ 
   // load the first Word document. 
   var fileHandle = fileHandles[0];
  // save a reference to the file if using it later. 
  this.selectedFileHandle = fileHandle;   

  // query read and write permissions on the file. 
  var state = await fileHandle.QueryPermissionAsync(Permission.ReadWrite); 
  if (state == PermissionState.Granted) 
  { 
     // read and load the file. 
     var bytes = await fileHandle.ReadBytesAsync(); 
  } 
}

Остальное такое же, как загрузка файла на стороне сервера.

// get a directory from the client. 
var directoryHandle = await ClientFileSystem.ShowDirectoryPickerAsync();   

// get the files from that directory. 
var fileHandles = await directoryHandle.GetFilesAsync("*.docx"); 
if (fileHandles.Length > 0) 
{ 
  // load the first Word document. 
  var fileHandle = fileHandles[0];   

  // query read and write permissions on the file. 
  var state = await fileHandle.QueryPermissionAsync(Permission.ReadWrite); 
  if (state == PermissionState.Granted) 
  { 
    var bytes = await fileHandle.ReadBytesAsync(); 
    using (var stream = new MemoryStream(bytes)) 
    { 
      var document = WordDocument.Load(stream, FormatType.Docx); 
      var sfdt = JsonConvert.SerializeObject(document);   
  
      this.documentEditor1.OpenFile(sfdt); 
    } 
  } 
}

Сохранение документов

Документы были загружены в программу просмотра на стороне клиента, теперь мы можем сохранить документы обратно на сервер или на клиент.

Чтобы получить поток документов от клиента, просто используйте следующее.

var document = await this.documentEditor1.GetDocumentAsync();

Сохранение документов на стороне сервера

Чтобы сохранить документ на сервере, просто используйте System.IO.File.WriteAllBytes().

System.IO.File.WriteAllBytes(Application.MapPath("path/to/file.docx"), document.ToArray());

Сохранение клиентских документов

Чтобы сохранить документ в расположении на стороне клиента, используйте ссылку из дескриптора файла на стороне клиента.

this.selectedFileHandle.WriteBytesAsync(document.ToArray(), 0, WritableType.Write, false);

Открытие клиентских документов с помощью Word

При использовании файловой системы клиента для загрузки документов в средство просмотра документы можно открывать непосредственно в Word из приложения Wisej.

Microsoft Office включает пользовательскую схему данных (ms-word://), которая позволяет открывать путь к файлу в Word из браузера. Подробнее об этом можно узнать здесь.

Например, мы можем напрямую открыть клиентский файл, расположенный по адресу F:/Play/Test.docx, из приложения Wisej, используя Application.Navigate().

Помните, что полный путь к каталогу должен быть известен приложению Wisej, и путь не может содержать пробелы.

Application.Navigate("ms-word:ofe|u|F:/Play/Test.docx");

Также вы можете получить демо-проект с GitHub здесь. Я надеюсь, что этот блог был полезен для вас. Спасибо за чтение.

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 5 мая 2022 г.