question

Donald-0878 avatar image
0 Votes"
Donald-0878 asked YijingSun-MSFT answered

Upload and preview word(.docx or .doc) OR pdf files

I have a canvas on my web form which displays a file in .pdf format when the file is uploaded to the page and will be inserted into the database.
My question is; is it possible to upload and preview files in word (.docx, or .doc) format or pdf format on the same control inside web form?

The control I have only accepts pdf format, but I want it to accept both pdf or word

Here is the one I have which accepts pdf file format

 <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;"></canvas>
                             </div>
                         </div>
                     </div>

 <script type="text/javascript">
         $(function () {
             $("#showPreviewBill").change(function () {
                 if (this.files && this.files[0]) {
                     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);
                     });
                 });
             }
         });
     </script>
dotnet-aspnet-generaldotnet-aspnet-webformsdotnet-aspnet-webpages
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered

Hi @Donald-0878 ,
As far as I think, PDF.js is community-driven and supported by Mozilla. And the goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs. If you want to preview word, I suggest you could use OpenXml to open the word document. They are different.

Best regards,
Yijing Sun


If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.