how to display pdf or other documents in html

PDFJS is a good solution if you are only displaying PDF files.
If you want to show other document formats such as (DOC, DOCX, XLS, etc,…) you may want to use a library that supports common document formats like LEADTOOLS.

The following online link shows how it works:
https://demo.leadtools.com/JavaScript/DocumentViewer/index.html

Note that you will need a service to be able to handle the different document types.
The following JavaScript code loads a PDF document file at the client side. You can use similar code with other document types:

var _this = this;
window.onload = function () {
var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
createOptions.viewCreateOptions.useElements = true;
createOptions.thumbnailsCreateOptions.useElements = true;
createOptions.thumbnailsContainer = document.getElementById("thumbnails");
createOptions.viewContainer = document.getElementById("documentViewer");
_this.documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
_this.documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom);
_this.documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
_this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
lt.Document.DocumentFactory.serviceHost = "http://TheAddressOfTheService";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
var url = "https://YourWebAddress/files/file.pdf";
lt.Document.DocumentFactory.loadFromUri(url, null)
.done(function (document) {
_this.documentViewer.setDocument(document);
})
};

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vincent Maverick Durano8y ago
Accepted answer
Take a look at PDF.js :
http://mozilla.github.com/pdf.js/
http://andreasgal.com/2011/06/15/pdf-js/
Mohamed Abedallah8y ago
PDFJS is a good solution if you are only displaying PDF files.
If you want to show other document formats such as (DOC, DOCX, XLS, etc,…) you may want to use a library that supports common document formats like LEADTOOLS.

The following online link shows how it works:
https://demo.leadtools.com/JavaScript/DocumentViewer/index.html

Note that you will need a service to be able to handle the different document types.
The following JavaScript code loads a PDF document file at the client side. You can use similar code with other document types:
var _this = this;
window.onload = function () {
var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
createOptions.viewCreateOptions.useElements = true;
createOptions.thumbnailsCreateOptions.useElements = true;
createOptions.thumbnailsContainer = document.getElementById("thumbnails");
createOptions.viewContainer = document.getElementById("documentViewer");
_this.documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
_this.documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom);
_this.documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
_this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
lt.Document.DocumentFactory.serviceHost = "http://TheAddressOfTheService";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
var url = "https://YourWebAddress/files/file.pdf";
lt.Document.DocumentFactory.loadFromUri(url, null)
.done(function (document) {
_this.documentViewer.setDocument(document);
})
};