'How to set fit width when embedding pdf in Chrome?

When I embed a pdf to view on Chrome/ Firefox , no matter I set width / set the parameter , it does not change the width of the pdf content, the only thing I can control is the pdf viewer size but not pdf page size, are there any way to control it? thanks

<object type="application/pdf" data="2010%20AHS%20XC%20Results.pdf" width="1500" height="1200"></object>

<object type="application/pdf" data="2010%20AHS%20XC%20Results.pdf#view=fit" width="1500" height="1200"></object>

   <object type="application/pdf" data="2010%20AHS%20XC%20Results.pdf" width="1500" height="1200">
    <parm name="view" value="fit/>
</object>

None of the above code work

htmlgoogle-chromefirefoxobjectpdf


Solution 1:[1]

I had the exact same problem and found after quite a lot of digging that the problem is with the Chrome pdf viewer. It does not accept url open parameters like adobe does, see https://code.google.com/p/chromium/issues/detail?id=64309.

In order to test this I typed in "about:plugins" in Chrome, disabled Chrome pdf viewer and enabled the adobe viewer. Once I did this the following code worked for me:

<object type="application/pdf" data="2010%20AHS%20XC%20Results.pdf" width="1500" height="1200">
<parm name="view" value="FitH" /></object>

I understand this is not a real fix as you can't control whether the visitors to your site have this plugin or not, but wanted to leave this answer here so that others who see this post know that the issue is with Chrome Pdf viewer not accepting URL open parameters as of 11/21/14 and so will not waste their time looking for issues in their code.

Solution 2:[2]

I know this is old question but I came through the same problem. I am having same issue with chrome v43 (but not in 40/41).

Solution: Instead using <embed> tag to display PDF. Use <iframe> with src attribute with PDF rendering URL. If you don't want to disclose your PDF path then give your script path, which will print PDF content with header application/pdf.

Solution 3:[3]

To expound on @Parixit's answer, you also need to append "#view=fitH" in order to get this to work. Here's the code you could use to create a reusable solution:

function getQSVar(val) {
  const query = window.location.search.substring(1);
  let vars = query.split("&");
  for (let i = 0; i < vars.length; i++) {
    let pair = vars[i].split("=");
    if (pair[0] == val) {
      return pair[1];
    }
  }
  return false;
}

let pdf;
if (getQSVar("pdf")) {
  pdf = getQSVar("pdf");
  document.getElementById("pdf_viewer").src = pdf + "#view=fitH";
}
body {
  margin: 0;
}
#pdf_viewer {
  width: 100vw;
  height: 800px;
}
<iframe id="pdf_viewer" src=""></iframe>

It doesn't work in here, but if you save the code to a separate file and then pass the URL of a PDF like this => iframe.html?pdf=path_to_pdf it should work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paolo Forgia
Solution 2 Parixit
Solution 3 Realto619

Related Questions