Serenity: PDF Viewer in Serenity Framework

[DataminerIP]

Hi guys,

Does someone have an example on how to implement PDF viewer functionality in the Serenity Framework? I have been searching on google for a couple of days now, but i don't seem to be able to get it going. Anyone has some examples or tips for me ?

Kind regards,
The Miner.

[volkanceylan]

Reports are already rendered as PDF and every browser has an integrated PDF viewer nowadays. What are you trying to do? Give Pdf.js a try maybe.

[DataminerIP]

Hi Volkan,

Thank you for your fast feedback.
I already tried with Pdf.js, not sure why but facing troubles when registering the worker on my typescript interface. i will give it another go and try to report the issue i am facing.

Kind regards,
The Miner.

[stefano5885]

@DataminerIP you could use this decorator.
1) install pdf.js
2) add in ScriptBundles.json

    "~/Scripts/pdf.js/web/viewer.js",
    "~/Scripts/pdf.js/build/pdf.js",

3) add in CssBundles.json
"~/Scripts/pdf.js/web/viewer.js",

4) Add this typescript filePDFViewerEditor.ts

/**
 * This is an PDFViewer widget
 *  
 */
namespace Serenity.Helpers {

    @Serenity.Decorators.element("<div/>")
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class PDFViewerEditor extends Serenity.Widget<PDFViewerEditorOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue {

        private locale: string;

        constructor(container: JQuery, options: PDFViewerEditorOptions) {
            super(container, options);
            if (this.options.hideLabel)
                this.element.closest('.field').find('.caption').hide();

            this.updateElementContent();
        }

        private updateElementContent() {


            var elID = 'pdf' + this.uniqueName;
            this.element.append('<iframe id="' + elID + '"></iframe>');
            var input = this.element.find('#' + elID);
            input.attr({
                'width': '100%', //Q.coalesce(this.options.width, 500),
                'height': Q.coalesce(this.options.height, 300),

            });
            this.locale = Q.coalesce(this.options.locale, 'en');
        }

        // Implement get and set
        public get value(): string {
            var sld = this.element.find('#pdf' + this.uniqueName);
            return sld.attr('referencefilepath');
        }

        public set value(value: string) {
            var sld = this.element.find('#pdf' + this.uniqueName);
            sld.attr({
                'src': Q.resolveUrl('~/Scripts/pdf.js/web/viewer.html?file=') + Q.resolveUrl('~/upload/' + value + '#locale=' + this.locale)
            });
        }

        public getEditValue(property, target) {
            target[property.name] = this.value;
        }

        public setEditValue(source, property) {
            this.value = source[property.name];
        }
    }

    export interface PDFViewerEditorOptions {
        width: number;
        height: number;
        locale: string;
        hideLabel: boolean;
    }
}

5) Transform your T4 models
6) use the decorator

example:

        [PDFViewerEditor(Height = 500,HideLabel = true)]
        public String PathDoc { get; set; }

[volkanceylan]

@stefano5885 thanks for nice sample