适应放大: HTML 中嵌入 PDF

我嵌入一个本地 pdf 文件到一个简单的网页，我期待设置初始缩放，以适应对象的大小。下面是我试过的，但它不影响变焦。

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

是否有人知道如何修改代码，使其初始缩放设置为适合对象的大小。

145740 次浏览
小开

Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.

Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:

filename.pdf#view=FitH

What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.

For a full list of available parameters see this doc

EDIT: (lazy mode on)

enter image description here enter image description here enter image description here enter image description here enter image description here

小开

Bit late response to this question, however I do have something to add that might be useful for others.

If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH

小开

Use iframe tag do display pdf file with zoom fit

<iframe src="filename.pdf" width="" height="" border="0"></iframe>
小开

For me this worked(I wanted to zoom in since the container of my pdf was small):

    <embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
小开

This method uses "object", it also has "embed". Either method works:

<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
小开

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>
小开

This works fine for me

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

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


提交答案