This package is heavily based on the ExtJS 4 version ext_ux_pdf_panel from SunboX. I have updated his version to an Extjs 6.x package and added some extra features.

• Based on Mozilla's PDF.js library
• Document view per page or contineous
• Text selection for copy and paste
• Surround pages with optional borders
• Language independent

This package is developed for classic browser applications. It doesn't require the use of Sencha CMD but it is very much recommended.

No Browser Plugin required, pure JavaScript. PDF Rendering is done using the great Mozilla PDF.js Library (https://github.com/mozilla/pdf.js).

Git clone this repo in the 'packages/local' folder of your application or workspace. After that put the following in your app.json:

"classic": {
    "requires": [
       "ext-pdf-viewer",
       ....
    ],
    ...
},

This required pdfjs files are automatically loaded in the head of your index.html file (see package.json, js section). This reduces the effort of adding the tags in this file yourself and it will give no errors when creating your own build for the paths are always correctly set.

You can see and modify (like not minifying) the added js files in the package.json of this package.

By default the required JavaScript for enabling text select layers is enabled.

If you have different PDF viewer panels in your application, where one panel requires text select layers and another doesn't, then you can disable the functionality per panel.

The panel where you don't want text selection you can add:

disableTextLayer: true

in your panel configuration.

The PDFViewer has a paging toolbar by default. That can't be changed. But you can have additional docking items with your panel definition.

Sample:

{
    xtype: 'PdfViewerPdfPanel',
    layout: 'fit',
    title: 'Viewer',
    bodyPadding: 20,
    iconCls: 'fa fa-file-pdf-o',
    showLoadMaskOnInit: false,
    disableTextLayer: false,
    showPerPage: false,
    pageScale: 1.25,
    dockedItems: [{
        dock: 'top',
        xtype: 'toolbar',
        items: [{
            text: 'Button 1',
            handler: function (b, e) {
                this.up('panel').fireEvent('btnOneClicked', b, e);
            }
        }, {
            text: 'Button 2',
            handler: function (b, e) {
                this.up('panel').fireEvent('btnTwoClicked', b, e);
            }
        }]
    }]
}]

items: [{
    title: 'Viewer',
    xtype: 'PdfViewerPdfPanel',
    layout: 'fit',
    src: '/data/sample2.pdf'
},
...  

items: [{
    xtype: 'PdfViewerPdfPanel',   // xtype
    layout: 'fit',                // layout           
    title: 'Viewer',              // title
    bodyPadding: 20,              // bodyPadding, default no padding !!!
    iconCls: 'fa fa-file-pdf-o',  // iconCls
    showLoadMaskOnInit: false,    // required if you don't load document at init
    disableTextLayer: false,      // see earlier remarks
    showPerPage: false,           // show contineous documents
    pageScale: 1.25,              // initial pageScale (125%, default = 1 (100%))
    dockedItems: [{                  
        dock: 'top',
        xtype: 'toolbar',
        items: [{
            text: 'Button 1',
            handler: function (b, e) {
                this.up('panel').fireEvent('btnOneClicked', b, e);
            }
        }, {
            text: 'Button 2',
            handler: function (b, e) {
                this.up('panel').fireEvent('btnTwoClicked', b, e);
            }
        }]
    }]
},
...        

Ext.create('PdfViewer.view.panel.PDF', {
    title    : 'PDF Panel',
    width    : 600,
    height   : 500,
    pageScale: 1.25, 
    src      : 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf', 
    renderTo : Ext.getBody()
});

In the locale folder of this package you will find the objects that override the text variables. You can add your own locale easily by adding another language folder like de or nl with the same structure.

If set to true rendering will only be done page by page. If set to false then rendering will render the complete document at once and shown as a contineous scrolling document. Paging will animate between pages without additional rendering.

Places a border in the SASS value $color_neutral around the page (default:true)
See folder sass/etc/all.scss

Initial scale of shown pages, 1 = 100%, 2 = 200% (default:1)

default: 'Loading PDF, please wait...'

default: 'Page'

default: 'of {0}'

default: 'First Page',

default: 'Previous Page',

default: 'Next Page',

default: 'Last Page',

See PDF.js in the 'src/view/panel' folder for all the configs.

For an demo, please visit https://enovision.github.io/Viewer