Creating a word web

Word онлайн — бесплатный сервис корпорации Майкрософт, предоставляющий доступ к созданию и редактированию документов Microsoft Word в режиме онлайн, без установки программы на компьютер. Пользователь может бесплатно использовать Ворд онлайн для работы с текстовыми документами из браузера.

Microsoft Office — мощный пакет офисных программ, своего рода стандарт для приложений данного типа. Популярные программы, входящие в состав офисного пакета, широко используются на предприятиях и в личных целях пользователями по всему миру.

Для работы с текстовыми документами используется текстовый процессор Microsoft Word, входящий в состав пакета офисных приложений. MS Office — платное приложение, устанавливаемое на компьютер, распространяемое в разной комплектации, в зависимости от потребностей покупателя. Имеется онлайн версия Word 365, распространяемая по платной подписке.

Не все пользователи знают, что наряду с платными решениями, Microsoft создала бесплатный сервис Office Online, который доступен пользователям совершенно бесплатно. В состав Office Online входит текстовый редактор Word online, а также другие популярные приложения: Excel online и PowerPoint online. Поэтому пользователь может создать документ Ворд онлайн бесплатно, как бы странно это на первый взгляд не звучало.

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

Как в Ворд онлайн работать бесплатно

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

Для создания документа Word, пользователь заходит на веб-страницу сервиса Word Online, или получает бесплатный доступ к Word онлайн из веб-интерфейса других сервисов корпорации Microsoft: облачного хранилища OneDrive или электронной почты Outlook.com. Редактор Ворд онлайн интегрирован в российские облачные хранилища Яндекс Диск и Облако Mail.Ru, поэтому пользователи могут создать документ Ворд онлайн непосредственно из веб-интерфейса облачного хранилища.

Использовать Ворд онлайн без регистрации не получится, потому что потребуется вход по учетной записи Майкрософт или по логину Skype. В случае использования сервиса из облачного хранилища, все равно понадобится войти в облачное хранилище, введя учетные данные.

Создайте учетную запись Майкрософт, это совсем нетрудно. Другой вариант: войдите в облачное хранилище для того, чтобы выполнить редактирование Ворд онлайн бесплатно, без ввода данных учетной записи Microsoft. Поступайте так, как вам более удобно.

Сторонние компании имеют бесплатные онлайн сервисы, поддерживающие работу с документами в вордовских форматах «.docx» и «.doc». Их использование мы не рассматриваем в этой статье, потому что сейчас нас интересует оригинальный сервис, а не его аналоги.

Редактирование документа в Word Online

Работа с документами Ворд в режиме онлайн проходит в следующем порядке:

1. Пользователь открывает браузер, а затем входит непосредственно на сайт Word online, или получает доступ к сервису через электронную почту Outlook.com, или в веб-интерфейсе облачных хранилищ OneDrive, Яндекс.Диск, Облако Mail.Ru.
2. Происходит создание и редактирование документа Word.
3. Созданный документ автоматически сохраняется в облачном хранилище. Пользователь может скачать файл в формате «DOCX» на компьютер, или скачать на компьютер копию этого файла в форматах «PDF» или «ODT».

Сейчас я покажу, как это происходит, на примере сервиса Word Online:

1. Перейдите на страницу Word Online.
2. Введите данные от учетной записи Майкрософт. Если у вас нет учетной записи, создайте ее, это не займет много времени.
3. В окне «Word Online» нажмите на «Новый документ».
4. После этого, откроется страница текстового редактора, на которой можно создать, отредактировать, а затем сохранить документ Ворд.

После завершения работы с документом Word, щелкните по меню «Файл».

В выпадающем меню выберите «Сохранить как».

В окне «Сохранить как» предложено несколько вариантов для сохранения документа:

• Сохранить как — сохранение копии в OneDrive, связанным с вашим аккаунтом.
• Переименовать — переименование файла.
• Скачать копию — скачивание копии документа на компьютер.
• Скачать в формате PDF — скачивание копии документа на компьютер в формате «PDF».
• Скачать в формате OTD — скачивание копии документа на компьютер в формате «ODT».

Выберите подходящий вариант для сохранения документа.

Ворд онлайн в OneDrive

Облачное хранилище OneDrive интегрировано в операционную систему Windows 10. Пользователи, работающие в Windows 7, Windows 8, Windows 8.1, могут установить приложение OneDrive на свой компьютер.

Для работы с Word онлайн программа не понадобится, мы будем использовать веб-интерфейс браузера.

1. Войдите на сайт OneDrive в браузере.
2. В левом верхнем углу нажмите на кнопку «Открытие средств запуска для доступа к приложениям Office 365».
3. Откроется окно с плитками для запуска приложений Microsoft. Нажмите на плитку «Word».

Среди других приложений, пользователю бесплатно доступны в режиме онлайн популярные офисные программы Excel и PowerPoint из бесплатного пакета Office Online.

Доступ к Word онлайн в Outlook.com

Электронная почта Outlook.com тесно связана с другими приложениями Microsoft. Из электронной почты можно получить доступ к средствам Office online.

1. Войдите в свою электронную почту Outlook.com.
2. В левом верхнем углу нажмите левой кнопкой мыши на значок в форме плитки «Приложения».
3. После этого откроются доступные онлайн сервисы, среди них Word онлайн.

1. Нажмите на значок, приступите к работе с документом.

Microsoft Word онлайн в Яндекс Диск

Облачное хранилище Яндекс Диск добавило интеграцию с бесплатными сервисами Office Online. Пользователь может открыть или создать документ Ворд непосредственно из облачного хранилища.

1. Войдите в Яндекс Диск, например из электронного почтового ящика.
2. В левом верхнем углу нажмите на кнопку «Создать».
3. Среди предложенных вариантов выберите «Текстовый документ».

После этого, в окне браузера откроется текстовый процессор Word онлайн.

Ворд онлайн в Облако Mail.Ru

Облако@Mail.Ru поддерживает работу с сервисами Office онлайн. Поэтому из облачного хранилища Облако Mail.Ru пользователи могут создавать текстовые документы Word.

1. Войдите в Облако Mail.Ru из электронной почты.
2. В левом верхнем углу нажмите на стрелку около кнопки «Создать папку».
3. В контекстном меню выберите «Документ».

В окне браузера откроется тестовый редактор Word Online.

Выводы статьи

Пользователи могут бесплатно воспользоваться текстовым редактором Word онлайн из состава Office Online. Ворд онлайн доступен из окна браузера на странице Word Online, в электронной почте Outlook.com, из веб-интерфейса в облачных хранилищах OneDrive, Яндекс Диск, Облако Mail.Ru.

Introduction

Word documents are everywhere and are used for countless tasks so you may have a requirement to support their generation from within your web application or webpage, this could include downloading a C.V from your personal site to the generation of a report based on data from within your web application that can be printed out or emailed by your client.

Goals

Create and save a Word document using only client-side vanilla/plain JavaScript.

Prerequisites

In order to complete this example you should have some basic knowledge of HTML and JavaScript.

Step 1 — Setup project

In order to concentrate on the job in hand and to get up and running as quickly as possible we are going to use CodeSandbox and their vanilla starter project.

A new CodeSandbox project can be created by opening the following link vanilla JavaScript project.

Step 2 — Install dependencies needed to create a Word document

With the project setup we can now install the two modules/dependencies needed to successfully create and save a Word document. The first package (docx) allows you to build your Word document and the second package (file-saver) gives the ability to save the document locally.

Add the two packages using the «Add Dependency» button.

Step 3 — Add a button to create our Word document

Before we start writing the code required to generate our Word documents lets add a button to the index.html file. We can then use this button to fire off the actions needed to generate the Word document.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <button id="generate">Generate Word Document</button>
    <script src="src/index.js"></script>
  </body>
</html>

Step 4 — Create a blank Word document

From now one we will be working solely within the index.js JavaScript file, lets start by deleting everything that is currently there as this is not need.

All we will need to create a blank word document is the Document and Packer features from the docx module and the saveAs feature from file-saver module.

import { Document, Packer } from "docx"
import { saveAs } from "file-saver"

Next add an event listener that is listening for clicks on the button we created in Step 3.

// Listen for clicks on Generate Word Document button
document.getElementById("generate").addEventListener(
  "click",
  function(event) {
    generateWordDocument(event)
  },
  false
)

Once the event listener is triggered we will call a function that will create a new instance of Document from the docx module and send this instance to a saveDocumentToFile function.

function generateWordDocument(event) {
  event.preventDefault()
  // Create a new instance of Document for the docx module
  let doc = new Document()
  // Call saveDocumentToFile with the document instance and a filename
  saveDocumentToFile(doc, "New Document.docx")
}

The saveDocumentToFile function creates a new instance of Packer from the docx modules, Packers in docx are used to turn your JavaScript code into a .docx file. We then send our document instance to Packers toBlob function which in turn converts our instance of Document into a Blob object, a mimeType is added to the Blob and finally the Blob is sent to saveAs feature of the file-saver module which will create the file and prompt you to save or open.

function saveDocumentToFile(doc, fileName) {
  // Create new instance of Packer for the docx module
  const packer = new Packer()
  // Create a mime type that will associate the new file with Microsoft Word
  const mimeType =
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  // Create a Blob containing the Document instance and the mimeType
  packer.toBlob(doc).then(blob => {
    const docblob = blob.slice(0, blob.size, mimeType)
    // Save the file using saveAs from the file-saver package
    saveAs(docblob, fileName)
  })
}

Clicking the ‘Generate Word Document’ button will now create and save a blank Word document.

Step 5 — Create content of the Word document

We can now start adding some content to the Word document. We will simply add a title, subtitle, two headings and a long paragraph as this will make it easier to understand once we come to start styling the document.

function generateWordDocument(event) {
  event.preventDefault()
  let doc = new Document()
  doc.createParagraph("Title")
  doc.createParagraph("Subtitle")
  doc.createParagraph("Heading 1")
  doc.createParagraph("Heading 2")
  doc.createParagraph(
    "Aliquam gravida quam sapien, quis dapibus eros malesuada vel. Praesent tempor aliquam iaculis. Nam ut neque ex. Curabitur pretium laoreet nunc, ut ornare augue aliquet sed. Pellentesque laoreet sem risus. Cras sodales libero convallis, convallis ex sed, ultrices neque. Sed quis ullamcorper mi. Ut a leo consectetur, scelerisque nibh sit amet, egestas mauris. Donec augue sapien, vestibulum in urna et, cursus feugiat enim. Ut sit amet placerat quam, id tincidunt nulla. Cras et lorem nibh. Suspendisse posuere orci nec ligula mattis vestibulum. Suspendisse in vestibulum urna, non imperdiet enim. Vestibulum vel dolor eget neque iaculis ultrices."
  )
  saveDocumentToFile(doc, "New Document.docx")
}

The Word document will now look something like this

Step 6 — Style the Word document

Now that we have some content we can look at styling the document.

Firstly we will create a theme object that will hold all the information about which fonts and colours we want to use.

function generateWordDocument(event) {
  event.preventDefault()
  // Create new instance of Document for the docx module
  let doc = new Document()
  doc.theme = {
    font: {
      normal: {
        family: "Calibri",
        color: "303856",
      },
      header: { family: "Calibri Light" },
    },
    title: {
      color: "4ABDAC",
    },
    headings: {
      one: {
        color: "FC4A1A",
      },
      two: {
        color: "F7B733",
      },
    },
  }
  ...
  ...
  // Call saveDocumentToFile withe the document instance and a filename
  saveDocumentToFile(doc, "New Document.docx")
}

After creating the theme object we can start creating our styles. We will create 5 styles

• Custom Heading 1
• Custom Heading 2
• Custom Title
• Custom Subtitle
• Custom Normal

These should tie up nicely to the content that we created in Step 5.

You can learn more about styles in Microsoft Word here

function generateWordDocument(event) {
  event.preventDefault()
  // Create new instance of Document for the docx module
  let doc = new Document()
  ...
  ...
  doc.Styles.createParagraphStyle("customHeading1", "Custom Heading 1")
    .basedOn("Heading 1")
    .next("Normal")
    .quickFormat()
    .font(doc.theme.font.header.family)
    .size(32)
    .bold()
    .color(doc.theme.headings.one.color)
    .spacing({ after: 250 })

  doc.Styles.createParagraphStyle("customHeading2", "Custom Heading 2")
    .basedOn("Heading 2")
    .next("Normal")
    .quickFormat()
    .font(doc.theme.font.header.family)
    .size(26)
    .bold()
    .color(doc.theme.headings.two.color)
    .spacing({ after: 150 })

  doc.Styles.createParagraphStyle("customTitle", "Custom Title")
    .basedOn("Title")
    .next("Normal")
    .quickFormat()
    .font(doc.theme.font.header.family)
    .size(56)
    .bold()
    .color(doc.theme.font.normal.color)
    .spacing({ after: 250 })

  doc.Styles.createParagraphStyle("customSubtitle", "Custom Subtitle")
    .basedOn("Subtitle")
    .next("Normal")
    .quickFormat()
    .font(doc.theme.font.header.family)
    .size(22)
    .color(doc.theme.font.normal.color)
    .spacing({ after: 150 })

  doc.Styles.createParagraphStyle("customNormal", "Custom Normal")
    .basedOn("Normal")
    .quickFormat()
    .font(doc.theme.font.normal.family)
    .size(20)
    .color(doc.theme.font.normal.color)
    .spacing({ after: 150 })
  ...
  ...
  // Call saveDocumentToFile withe the document instance and a filename
  saveDocumentToFile(doc, "New Document.docx")
}

With our styles in place we can apply them to our content.

function generateWordDocument(event) {
  event.preventDefault()
  // Create new instance of Document for the docx module
  let doc = new Document()
  ...
  ...
  doc.createParagraph("Title").style("customTitle")
  doc.createParagraph("Subtitle").style("customSubtitle")
  doc.createParagraph("Heading 1").style("customHeading1")
  doc.createParagraph("Heading 2").style("customHeading2")
  doc
    .createParagraph(
      "Aliquam gravida quam sapien, quis dapibus eros malesuada vel. Praesent tempor aliquam iaculis. Nam ut neque ex. Curabitur pretium laoreet nunc, ut ornare augue aliquet sed. Pellentesque laoreet sem risus. Cras sodales libero convallis, convallis ex sed, ultrices neque. Sed quis ullamcorper mi. Ut a leo consectetur, scelerisque nibh sit amet, egestas mauris. Donec augue sapien, vestibulum in urna et, cursus feugiat enim. Ut sit amet placerat quam, id tincidunt nulla. Cras et lorem nibh. Suspendisse posuere orci nec ligula mattis vestibulum. Suspendisse in vestibulum urna, non imperdiet enim. Vestibulum vel dolor eget neque iaculis ultrices."
    )
    .style("customNormal")
  // Call saveDocumentToFile withe the document instance and a filename
  saveDocumentToFile(doc, "New Document.docx")
}

Clicking the ‘Generate Word Document’ button now will create a Word document that look something like this

Conclusion

With the use of a couple of great packages we can easily create a nice looking Word document using solely client side JavaScript. Docx is very powerful and this article only covers the basics to get you up and running with a simple Word document.

Complete Example

A complete example of the code can be found here