如何在Angular2 / 4应用程序中包含pdf并支持收缩以仅在PDF而不是整个浏览器窗口上缩放？

Question

I have a PDF that I want to embed in a div on my webpage. Right now I am using the object tag, but it does not allow ease of zooming with your fingers on a touchscreen... I read about pdf.js, but it does not appear to be Angular2/4 compatible. Is there some solution that will allow for zooming with fingers?

Answer 1

I have tried lot more, Rendering the PDF into <object> tag is very difficult to implement and will get some problem of compatibility so my suggest is:

Use ng2-pdf-viewer :

<pdf-viewer src="shohel.pdf"></pdf-viewer>

Or Use <iframe> :

<iframe src="shohel.pdf" width='100%' height='100%' style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px"></iframe>

Answer 2

Its kinda late but i figure it out. PS: im using ionic 3 but it would work on browser if u make the adjustments

my html

<ion-header>
  <ion-toolbar>
 <div padding style="text-align:center;position: initial;display:flex;justify-content:center;flex-direction:row;height:10%;">
        <p style="margin-left: 30px;color:white; font-size: 123%;">Pdf Title</p>
    </div> 

    <ion-buttons end>
      <button ion-button (click)="dismiss()" strong style="width:115%;text-align:center;">
        <ion-icon name="close" ></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>

</ion-header>


<ion-content no-bounce >

   <div  #zoom class="zoom">
    <pdf-viewer [src]="somePDF" [external-link-target]="'blank'" [render-text]="true" >
    </pdf-viewer> 
  </div>
</ion-content>

my ts file

import { Component,ViewChild, ChangeDetectorRef,ElementRef } from '@angular/core';
import {  NavController, NavParams, Platform, AlertController, ViewController , Gesture, Content} from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'page-pdf-modal',
  templateUrl: 'pdf-modal.html',
})
export class PdfModalPage {
 @ViewChild(Content) content: Content;
 @ViewChild('zoom') zoom: ElementRef;

constructor(){}
ionViewDidEnter(): void {
    // Page must be fully rendered, ionViewDidLoad, doesnt work for this. Because it shows clientHeight without the margin of the header
    this._pinchZoom(this.zoom.nativeElement, this.content);
  }
private _pinchZoom(elm: HTMLElement, content: Content): void {
    const _gesture = new Gesture(elm);
    let ow = 0;
    let oh = 0;
    for (let i = 0; i < elm.children.length; i++) {
      let c = <HTMLElement>elm.children.item(i);
      ow = c.offsetWidth;
      oh += c.offsetHeight;
    }
    const original_x = content.contentWidth - ow;
    const original_y = content.contentHeight - oh;
    let max_x = original_x;
    let max_y = original_y;
    let min_x = 0;
    let min_y = 0;
    let x = 0;
    let y = 0;
    let last_x = 0;
    let last_y = 0;
    let scale = 1;
    let base = scale;

    _gesture.listen();
    _gesture.on('pan', onPan);
    _gesture.on('panend', onPanend);
    _gesture.on('pancancel', onPanend);
    // _gesture.on('tap', onTap);
    _gesture.on('pinch', onPinch);
    _gesture.on('pinchend', onPinchend);
    _gesture.on('pinchcancel', onPinchend);

    function onPan(ev) {   
      setCoor(ev.deltaX, ev.deltaY);
      transform();
    }
    function onPanend() {
      // remembers previous position to continue panning.
      last_x = x;
      last_y = y;
    }
    function onTap(ev) {
      if (ev.tapCount === 2) {
        let reset = false;
        scale += .5;
        if (scale > 2) {
          scale = 1; //1
          reset = true;
        }
        setBounds();
        reset ? transform(max_x/2, max_y/2) : transform();
      }
    }
    function onPinch(ev) {
      // formula to append scale to new scale
      scale = base + (ev.scale * scale - scale)/scale

      setBounds();
      transform();
    }
    function onPinchend(ev) {
      if (scale > 4) {
       scale = 4;
      }
      if (scale < 0.5) {
        scale = 0.5;
      }
      // lets pinch know where the new base will start
      base = scale;
     setBounds();
     transform();
    }
    function setBounds() {
      // I am scaling the container not the elements
      // since container is fixed, the container scales from the middle, while the
      // content scales down and right, with the top and left of the container as boundaries
      // scaled = absolute width * scale - already set width divided by 2;
      let scaled_x = Math.ceil((elm.offsetWidth * scale - elm.offsetWidth) / 2);
      let scaled_y = Math.ceil((elm.offsetHeight * scale - elm.offsetHeight) / 2);
      // for max_x && max_y; adds the value relevant to their overflowed size
      let overflow_x = Math.ceil(original_x * scale - original_x); // returns negative
      let overflow_y = Math.ceil(oh * scale - oh);

      setCoor(-scaled_x, scaled_y);

    }
    function setCoor(xx: number, yy: number) {
      x = Math.min(Math.max((last_x + xx), max_x), min_x);
      y = Math.min(Math.max((last_y + yy), max_y), min_y);
    }
    // xx && yy are for resetting the position when the scale return to 1.
    function transform(xx?: number, yy?: number) {
      elm.style.webkitTransform = `translate3d(${xx || x}px, ${yy || y}px, 0) scale3d(${scale}, ${scale} , 1)`;
    }
  }

my css file to make it work and not compromisse the div at least in ionic

.zoom {
    height: 100% !important;
    -ms-touch-action: none !important;
    touch-action: none !important;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-left: -100px;
    top: 0;
    bottom: 0;
    width: 100%;
}
body > ion-app > ion-modal > div > page-pdf-modal > ion-content > div.scroll-content{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: scroll;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;
}