Display Word Document in HTML Page using PHP.

We can easily render DOC or DOCX files in HTML webpages programmatically on the cloud. It can be useful in viewing Word documents in any browser without sharing the original files. In this article, we will learn how to display a Word document in an HTML page using a REST API in PHP.

The following topics shall be covered in this article:

Word to HTML Viewer REST API and PHP SDK

For rendering Word documents in HTML, we will be using the PHP SDK of GroupDocs.Viewer Cloud API. It allows rendering and viewing of supported document and image file formats programmatically. Please install it using the following command in the console:

composer require groupdocscloud/groupdocs-viewer-cloud

After installation, please use the Composers’ autoload to use the SDK as shown below:

require_once('vendor/autoload.php');

Please get your Client ID and Secret from the dashboard before following the mentioned steps. Once you have your ID and secret, add in the code as shown below:

// This code example demonstrates how to add client Id and Secret in the code.
static $ClientId = '659fe7da-715b-4744-a0f7-cf469a392b73';
static $ClientSecret = 'b377c36cfa28fa69960ebac6b6e36421';
static $ApiBaseUrl = 'https://api.groupdocs.cloud';
static $MyStorage = '';
// Intializing the configuration
$configuration = new GroupDocs\Viewer\Configuration();
// Seting the configurations
$configuration->setAppSid(self::$ClientId);
$configuration->setAppKey(self::$ClientSecret);
$configuration->setApiBaseUrl(self::$ApiBaseUrl);
view raw ViewWordDocumentInHTML_PHP_Configurations.php hosted with ❤ by GitHub

Display Word Document in HTML Page using REST API in PHP

We can display the content of a Word document in HTML by following the simple steps given below:

  1. Upload the DOCX file to the cloud
  2. Display Word Document in HTML Page
  3. Download the rendered file

Upload the Document

Firstly, we will upload the DOCX file to the cloud using the code sample given below:

// This code example demonstrates how to upload a DOCX file to the cloud.
// Initialize the api
$apiInstance = new GroupDocs\Viewer\FileApi($configuration);
// Input file path
$file = "C:\\Files\\Viewer\\input.docx";
// Upload file request
$request = new GroupDocs\Viewer\Model\Requests\uploadFileRequest("input.docx", $file);
// Upload file
$response = $apiInstance->uploadFile($request);
view raw ViewWordDocumentInHTML_PHP_Upload.php hosted with ❤ by GitHub

As a result, the uploaded file will be available in the files section of the dashboard on the cloud.

Display Word Document in HTML Page using PHP

Now, we will render or display the content of an uploaded Word document on HTML pages by following the steps given below:

  1. Firstly, create an instance of the ViewAPI.
  2. Next, create an instance of the ViewOptions.
  3. Then, provide the input file path.
  4. Also, set the ViewFormat as “HTML”.
  5. Next, initialize HtmlOptions object.
  6. Then, set various properties such as IsResponsive, ForPrinting, etc.
  7. After that, create CreateViewRequest with ViewOptions as argument.
  8. Finally, render Word to HTML using the **createView()** method.

The following code sample shows how to display a Word file in HTML using a REST API in PHP.

// This code example demonstrates how to render DOCX to HTML.
// Initialize the api
$apiInstance = new GroupDocs\Viewer\ViewApi($configuration);
// Define ViewOptions
$viewOptions = new Model\ViewOptions();
// Input file path
$fileInfo = new Model\FileInfo();
$fileInfo->setFilePath("input.docx");
$viewOptions->setFileInfo($fileInfo);
// Set ViewFormat
$viewOptions->setViewFormat(Model\ViewOptions::VIEW_FORMAT_HTML);
// Define HTML options
$renderOptions = new Model\HtmlOptions();
// Set it to be responsive
$renderOptions->setIsResponsive(true);
// Set for printing
$renderOptions->setForPrinting(true);
// Assign render options
$viewOptions->setRenderOptions($renderOptions);
// Create view request
$request = new Requests\CreateViewRequest($viewOptions);
// Create view
$response = $apiInstance->createView($request);
// Done
echo "HtmlViewerResponsiveLayout completed: ", count($response->getPages());
echo "\n";
view raw ViewWordDocumentInHTML_PHP_RenderToHTML.php hosted with ❤ by GitHub
Display Word Document in HTML Page using REST API in PHP

Display Word Document in HTML Page using REST API in PHP.

We can customize the rendering of Word to HTML by applying the following options:

  • Render specific range of pages
// Pass specific range of page numbers to render. 
// This will render all pages from starting from page 1 to 3.
$renderOptions->setStartPageNumber(1);
$renderOptions->setCountPagesToRender(3);
  • Render selected pages only
// Pass specific page numbers to render. 
// This will render only page number 1 and 3.
$renderOptions->setPagesToRender([1, 3]);
  • View pages in a specific order
// Pass page numbers in the order you want to render them
$renderOptions->setPagesToRender([2, 1]);
  • Render document with comments
$renderOptions->setRenderComments(true);

Download HTML Pages

The above code sample will save the rendered HTML page(s) on the cloud. It can be downloaded using the following code sample:

// This code example demonstrates how to download the rendered HTML pages from the cloud.
$fileApi = new GroupDocs\Viewer\FileApi($configuration);
// Get all the pages
$pages = $response->getPages();
// Save pages one by one
foreach ($pages as $page)
{
// Create download file request
$downloadFileRequest = new GroupDocs\Viewer\Model\Requests\DownloadFileRequest($page->getPath(), "");
// Download file
$file = $fileApi->DownloadFile($downloadFileRequest);
echo "$page downloaded!";
echo "\n";
}
view raw ViewWordDocumentInHTML_PHP_Download.php hosted with ❤ by GitHub

Embed Word Document into Existing HTML Page

We can also embed a Word Document into an existing HTML page by following the steps given below:

  1. Firstly, create instances of the ViewAPI and FileAPI.
  2. Next, create an instance of the ViewOptions.
  3. Then, provide the input file path.
  4. Also, set the ViewFormat as “HTML”.
  5. Next, initialize HtmlOptions object.
  6. Then, set various properties such as IsResponsive, ForPrinting, etc.
  7. After that, create CreateViewRequest with ViewOptions as argument.
  8. Then, render Word to HTML using the createView() method.
  9. Next, Load an existing HTML file and get elements of body tag
  10. Then, read HTML of each page and append into body tag
  11. After that, save the updated HTML using saveHTML() method.
  12. Finally, save the HTML file using file_put_contents() method.

The following code sample shows how to embed a Word document into an existing HTML page using a REST API in PHP.

// This code example demonstrates how to render DOCX to HTML.
// Initialize the api
$apiInstance = new GroupDocs\Viewer\ViewApi($configuration);
$fileApi = new GroupDocs\Viewer\FileApi($configuration);
// Define ViewOptions
$viewOptions = new Model\ViewOptions();
// Input file path
$fileInfo = new Model\FileInfo();
$fileInfo->setFilePath("input.docx");
$viewOptions->setFileInfo($fileInfo);
// Set ViewFormat
$viewOptions->setViewFormat(Model\ViewOptions::VIEW_FORMAT_HTML);
// Define HTML options
$renderOptions = new Model\HtmlOptions();
// Set it to be responsive
$renderOptions->setIsResponsive(true);
// Set for printing
$renderOptions->setForPrinting(true);
// Assign render options
$viewOptions->setRenderOptions($renderOptions);
// Create view request
$request = new Requests\CreateViewRequest($viewOptions);
// Create view
$response = $apiInstance->createView($request);
// Load an existing HTML file
$domDoc = new DOMDocument();
$domDoc->loadHTMLFile("C:\Files\Viewer\Sample.html");
$body = $domDoc->GetElementsByTagName('body')->item(0);
// Get pages
$pages = $response->getPages();
// Embed all rendered HTML pages into body tag of existing HTML
foreach ($pages as $page)
{
// Create download file request
$downloadFileRequest = new GroupDocs\Viewer\Model\Requests\DownloadFileRequest($page->getPath(), "");
// Download converted page
$file = $fileApi->DownloadFile($downloadFileRequest);
// Read HTML from download file
$html = file_get_contents($file->getRealPath());
//Add content to fragment
$fragment = $domDoc->createDocumentFragment();
$fragment->appendXML("<div>$html</div>");
// Append the element to body
$body->appendChild($fragment);
}
// Save updated HTML
$output = $domDoc->saveHTML();
// Save the file
file_put_contents("C:\Files\Viewer\Sample.html", $output);
view raw ViewWordDocumentInHTML_PHP_EmbeddIntoExistingHTML.php hosted with ❤ by GitHub
Embed-Word-Document-into-an-Existing-HTML-Page

Embed a Word Document into an Existing HTML Page.

Display Word Document in HTML with Watermark using PHP

We can add a watermark text while rendering Word documents to HTML pages programmatically by following the steps given below:

  1. Firstly, create an instance of the ViewAPI.
  2. Next, create an instance of the ViewOptions.
  3. Then, provide the input file path.
  4. Also, set the ViewFormat as “HTML”.
  5. Next, create and assign an instance of the Watermark.
  6. Then, set watermark size and text.
  7. After that, create CreateViewRequest with ViewOptions as argument.
  8. Finally, render Word to HTML using the createView() method.

The following code sample shows how to display a Word document in HTML with a watermark using a REST API in PHP.

// This code example demonstrates how to render Word in HTML with Watermark.
// Initialize the api
$apiInstance = new GroupDocs\Viewer\ViewApi($configuration);
// Define ViewOptions
$viewOptions = new Model\ViewOptions();
// Input file path
$fileInfo = new Model\FileInfo();
$fileInfo->setFilePath("input.docx");
$viewOptions->setFileInfo($fileInfo);
// Set ViewFormat
$viewOptions->setViewFormat(Model\ViewOptions::VIEW_FORMAT_HTML);
// Define Watermark
$watermark = new Model\Watermark();
$watermark->setText("This is sample text watermark!");
$watermark->setSize(100);
$watermark->setColor("Red");
$viewOptions->setWatermark($watermark);
// Create view request
$request = new Requests\CreateViewRequest($viewOptions);
// Create view
$response = $apiInstance->createView($request);
// Done
echo "AddWatermark completed: ", count($response->getPages());
echo "\n";
view raw ViewWordDocumentInHTML_PHP_RenderWithWatermark.php hosted with ❤ by GitHub
Display Word Document in HTML with Watermark using PHP.

Display Word Document in HTML with Watermark using PHP.

Try Online

Please try the following free online DOCX rendering tool, which is developed using the above API. https://products.groupdocs.app/viewer/docx

Conclusion

In this article, we have learned how to:

  • view Word document in a browser supported HTML webpage using PHP;
  • customize the rendering of Word to HTML;
  • embed Word document into an existing HTML webpage;
  • view the content of a Word file in HTML with watermark;
  • programmatically upload the DOCX file to the cloud;
  • download the rendered HTML files from the cloud.

Besides, you can learn more about GroupDocs.Viewer Cloud API using the documentation. We also provide an API Reference section that lets you visualize and interact with our APIs directly through the browser. In case of any ambiguity, please feel free to contact us on the forum.

See Also