How to add pdf viewer to website for mobile browsers

Question

I want the user to be able to view pdf by clicking on a link when visited on any mobile browsers. I've tried and but both gives the error of "This plugin is not supported"

<div id="pdf">
   <iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
        <p>It appears your web browser doesn't support iframes.</p>
   </iframe>
</div>

<object data="lorem.pdf" type="application/pdf">
        <p>It appears you don't have Adobe Reader or PDF support in this web browser. <a href="lorem.pdf">Click here to download the PDF</a>. Or <a href="http://get.adobe.com/reader/" target="_blank">click here to install Adobe Reader</a>.</p>
       <embed src="lorem.pdf" type="application/pdf" />
</object>

Answer 1

您可以使用Google文档查看器

<iframe src="http://docs.google.com/viewer?url=" + PathToMyPdfFile + "&embedded=true" width="100%" height="100%" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>

Answer 2

As mentioned above, use Google Docs Viewer .

Working example:

<iframe src="https://docs.google.com/viewer?url=https://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Replace the example link https://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf with any PDF you want.

To Note:

If you get this error here:

Mixed Content: The page at 'link' was loaded over HTTPS

Make sure you have https:// in your link.