Retina display support about ng2-pdf-viewer

[cbratschi]

Here is a patch (JS version) to use SVG rendering:

    PdfViewerComponent.prototype.renderPage = function (pageNumber) {
        var _this = this;
        return this._pdf.getPage(pageNumber).then(function (page) {
            var viewport = page.getViewport(_this._zoom, _this._rotation);
            var container = _this.element.nativeElement.querySelector('div');
            var canvas = document.createElement('canvas');
            var div = document.createElement('div');
            if (!_this._originalSize) {

                viewport = page.getViewport(_this.element.nativeElement.offsetWidth / viewport.width, _this._rotation);
            }
            if (!_this._showAll) {
                _this.removeAllChildNodes(container);
            }
            div.appendChild(canvas);
//            container.appendChild(div);

// Set dimensions
container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px';

// SVG rendering by PDF.js
page.getOperatorList()
    .then(function (opList) {
        var svgGfx = new window.PDFJS.SVGGraphics(page.commonObjs, page.objs);

        return svgGfx.getSVG(opList, viewport);
    })
    .then(function (svg) {
        container.appendChild(svg);
    });
return;

This is the best solution. Rendering quality is optimal on all platforms and performance seems to be better too.

Reference: https://www.sitepoint.com/custom-pdf-rendering/

[cbratschi]

My patch above uses SVG and not a higher resolution bitmap. Performance is therefore better. Please consider adding SVG support too.

[liangwenzhong]

@cbratschi may i have demo ?

[cbratschi]

@liangwenzhong We are using the patch as part of an Ionic 2 project. Rendering quality is great on iOS and desktop devices. There was only a problem with a missing font we fixed by updating some PDFs. Unfortunately I cannot provide an online demo because this is a private business app.

[liangwenzhong]

@cbratschi i also use ionic 2 !~ i think we doing the same thing !~but i still have a problem ~~can i use the pinch event ? i wanna zoom the pdf file ~~~~have u did this ?

[cbratschi]

@liangwenzhong The SVG based rendering should be fine for zooming without quality loss. What I would need is resize support e.g. from portrait to landscape on mobile devices. Pinching is probably more complicated as this discussion exhibits:

mozilla/pdf.js#2582

I hope the SVG patch will be integrated soon.

[liangwenzhong]

@cbratschi thanks for ur replay so much !~ i have anothre problem . i use ur script below:

PdfViewerComponent.prototype['renderPage'] = function(pageNumber) {
var _this = this;
return this._pdf.getPage(pageNumber).then(function(page) {
var viewport = page.getViewport(_this._zoom, _this._rotation);
var container = _this.element.nativeElement.querySelector('div');
var canvas = document.createElement('canvas');
var div = document.createElement('div');
if (!_this._originalSize) {
viewport = page.getViewport(_this.element.nativeElement.offsetWidth / viewport.width, _this._rotation);
}
if (!_this._showAll) {
_this.removeAllChildNodes(container);
}
div.appendChild(canvas);
container.appendChild(div);
// SVG rendering by PDF.js
page.getOperatorList()
.then(function(opList) {
var svgGfx = new window['PDFJS'].SVGGraphics(page.commonObjs, page.objs);
return svgGfx.getSVG(opList, viewport);
})
.then(function(svg) {
container.appendChild(svg);
});
return;

});

}
a very strange problem happened~

the page's become inverted order . the page2 go to the first page ,the page1 go to the second page .

have u resolve this ? :)

[liangwenzhong]

@cbratschi i fix the inverted order problem . :) like:

but, i got another problem -.- !~

how to catch the error event ? if an error happened?how can i catch?
just like : if error ,i have to hide the loading and alert some tips .

[VadimDez]

@cbratschi did the change in 1.1.4