Zoom to fit: PDF Embedded in HTML

Viewed 142107

I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.

 <embed src="filename.pdf?zoom=50" width="575" height="500">

does anyone know how to modify the code so its initial zoom is set to fit the object size.

8 Answers

just in case someone need it, in firefox for me it work like this

<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>

Followed @Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.

I shared for whom concern about view base64 content PDF file with object tag using Angular framework.

The option for view PDF

this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

Read PDF content from API as

let content = DataHelper.getDataFromAPI();

When click show content button use

showData() {
    let content = DataHelper.getDataFromAPI();

    this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

    this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
  }

In HTML file use object tag as

<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>

Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb

This works fine for me

<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
Related