Retina display support

[cbratschi]

Currently viewport.width and viewport.height are used for the rendering. This does not take retina display into account, such as iOS and macOS devices. The rendered text quality is therefore quite bad.

https://developer.mozilla.org/en/docs/Web/API/Window/devicePixelRatio

Please extend the component to support sub-pixel rendering.

[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/

[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 .

[cbratschi]

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

[VadimDez]

@cbratschi did the change in 1.1.4