How to Display an Rtf File Inside a Web Page Using PHP

Is it possible to display an RTF file inside a web page using PHP?

Most browsers won't reliably display RTF content. It IS possible to parse the RTF into HTML, and display the HTML content on your web page however.

You need some kind of program to parse RTF and convert it to HTML. I'm assuming it has to be free. I do not know of any reliable free RTF parsing or RTF to HTML libraries in PHP.

I recommend you use a command-line conversion program like RTF2HTML: http://sageshome.net/?w=downloads/soft/RTF2HTML.html

You would need to download and install this program on your webserver, allow the user to upload the file to a temp directory, and then call the command line application from PHP with shell_exec():

$html_output_path = '/path/for/processing/files/'
$html_output_filename = $username . $timestamp;
if (is_uploaded_file($_FILES['userfile']['tmp_name'])
{
  shell_exec('rtf2html ' . 
    escapeshellarg($_FILES['userfile']['tmp_name']) . " " .
    $html_output_path . $html_output_filename);
}
$html_to_display = file_get_contents($html_output_path . 
  $html_output_filename);

Then, parse the results as HTML and display them. Not a bad strategy. Note that you will probably need to remove the head, body and possibly other tags if you're going to display the content inside another web page.

Classic Rich Text Format in a webpage

After doing further research all i found is this javascript library that allows only to display RTF.

It seems there is a "gap in the market": all widgets focus on HTML.

This PHP related SO question is somehow a duplicate of my question.

Using PHP to insert an image (via URL) to an existing Word document

Comparing two RTF files before and after adding an image you will find that the added data looks like this:

{\pict\wmetafile8\picw[N]\pich[N]\picwgoal[N]\pichgoal[N] [BYTES]}

\pict - The picture tag
\wmetafile[N] - Indicates that the image type is a Windows
Metafile. [N] = 8 specifies that the metafile's axes can be sized
independently.
\picw[N] and \pich[N] - Define the size of the image, where[N] is
in units of hundreths of millimeters (0.01)mm.
\picwgoal[N] and \pichgoal[N] - Define the target size of the
image, where [N] is in units of twips.
[BYTES] - The hexadecimal representation of the image (bin2hex).

So, to add an image, we will replace the last occurrence of "}" with the string we built above + "}".

Writing the code should be easier now. :)

How do I split an RTF document into individual pages using PHP

There are no explicit page breaks in RTF files, unless the user put them there. "Paging" is computed when the document is rendered. No easy answer it seems, IIUC.

chrome not supporting application/rtf type

After trying a lot found something.

First i downloaded the rtf.js from this link. rtf.js . Then went through this link. getting started with rtf.js. (download entire dist folder and place it into your html folder. dist folder doesn't contain jquery min js plz download it. and include all the script files in your html). Below is the code i modified. (Entire rtf will be converted into objects). Along with the following code please include the default code given by rtf.js.(Please make sure your rtf file is in proper way.)

const rtf = 
`{\\rtf1\\ansi\\ansicpg1252\\deff0\\deflang1033{\\fonttbl{\\f0\\fnil\\fcharset0 Calibri;}}
{\\*\\generator Msftedit 5.41.21.2510;}\\viewkind4\\uc1\\pard\\sa200\\sl276\\slmult1\\lang9\\f0\\fs22 This \\fs44 is \\fs22 a \\b simple \\ul one \\i paragraph \\ulnone\\b0 document\\i0 .\\par

{\\colortbl;\\red0\\green0\\blue0;\\red255\\green0\\blue0;}
This line is the default color\\line
\\cf2
This line is red\\line
\\cf1
This line is the default color
}
}`;

<div id="display">

</div>

<script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>
<script>
  doc.render().then(function(htmlElements) {
     //console.log(meta);
     //console.log(htmlElements);
     console.log(htmlElements);
     var display = document.getElementById("display");
     for(var i=0;i<htmlElements.length;i++){
        //console.log(htmlElements[i][0].innerHTML);
        display.innerHTML+=htmlElements[i][0].innerHTML; //RENDERING ALL DIVS INTO display DIV
     }
     }).catch(error => console.error(error))
</script>