Upload and preview word (.docx or .doc) and PDF file using jQuery

Hi RichardSa,

Refer below example.

HTML

<div>
    <div class="form-horizontal">
        <div class="containr-fluid">
            <asp:FileUpload runat="server" ID="showPreviewBill" />
            <br />
        </div>
        <div class="container-fluid shadow-sm p-3 mb5 bg-white rounded" id="card" style="font-family: 'Roboto', sans-serif; width: 100%; margin: 0 auto; border: 1px solid #e4e7e8;">
            <div class="contentt" style="width: 100%;">
                <canvas id="the-canvas" style="border: 1px solid grey; display: none;"></canvas>
                <div id="docPreview" style="display: none;"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.18/mammoth.browser.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.js"></script>
<script type="text/javascript" src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script type="text/javascript">
    $(function () {
        $("#showPreviewBill").change(function (e) {
            if (this.files && this.files[0]) {
                if (this.files[0].name.split('.').pop().toUpperCase() == "DOCX" || this.files[0].name.split('.').pop().toUpperCase() == "DOC") {
                    parseWordDocxFile(e.target.files, '#docPreview');
                }
                if (this.files[0].name.split('.').pop() == "pdf") {
                    $('#the-canvas').show();
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        showInCanvas(e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            }
        });

        function convertDataURIToBinary(dataURI) {
            var BASE64_MARKER = ';base64,';
            var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
            var base64 = dataURI.substring(base64Index);
            var raw = window.atob(base64);
            var rawLength = raw.length;
            var array = new Uint8Array(new ArrayBuffer(rawLength));

            for (i = 0; i < rawLength; i++) {
                array[i] = raw.charCodeAt(i);
            }
            return array;
        }

        function showInCanvas(url) {
            'use strict';
            var pdfAsArray = convertDataURIToBinary(url);
            pdfjsLib.getDocument(pdfAsArray).then(function (pdf) {
                pdf.getPage(1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }

        function parseWordDocxFile(inputElement, showDiv) {
            var files = inputElement || [];
            if (!files.length) {
                return
            };
            var file = files[0];
            var reader = new FileReader();
            reader.onloadend = function (event) {
                var arrayBuffer = reader.result;
                mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
                    .then(function (resultObject) {
                        $(showDiv).html(resultObject.value).show();
                    });

                mammoth.extractRawText({ arrayBuffer: arrayBuffer })
                    .then(function (resultObject) {
                        result2.innerHTML = resultObject.value;
                    });

                mammoth.convertToMarkdown({ arrayBuffer: arrayBuffer })
                    .then(function (resultObject) {
                        result3.innerHTML = resultObject.value;
                    });
            };
            reader.readAsArrayBuffer(file);
        }
    });
</script>

Screenshot

Reference: Preview word document