Pdfobject.js – Embed PDF in a div instead of occupying the entire page (requires browser support to display PDF, not support, can be configured to do this)

Liverpoolfc.tv: pdfobject.com/

Github address: github.com/pipwerks/PD…

Support: PDFObject 2.0 is backward compatible with version 1.0, designed for modern browsers and supports Chrome, Firefox, Safari (OS X and iOS), IE 9-11, and MS Edge

Use: 1. Create a container to embed PDF

2. Tell PDFObject the path of the inserted PDF file, And which inserted into the container < script SRC = "library/pdfobject. Js" > < / script > < script > pdfobject. Embed (' uploads/PDFS/dongxuemin. PDF ', '# PDF); </script> 3. You can choose to use CSS to specify visual styles, including dimensions, borders, margins, etc. <style>. } .pdfobject { border: 1px solid #ccc; } </style>Copy the code

Question: Do I need Javascript code to embed a PDF in an HTML page?

Answer: No Javascript code at all!

Embedded PDF, the author gives the page without any Javascript code 4 methods: pdfobject.com/static.html

/* Note: These examples work with all modern desktop browsers, but the results will vary with older desktop and mobile browsers. As for iOS 9, none of these examples work properly in Safari on iOS. */ 1. Use the <object> tag, when the browser does not support PDF embedding, Allow us to have alternative display content < object data = "uploads/PDFS/dongxuemin pdf# page = 2" type = "application/PDF" width = "100%" height = "100%" > < p > I'm sorry, Your browser does not support PDF preview, please click the link to download the PDF file < a href = "uploads/PDFS/dongxuemin. PDF" > < / a > < / p > < object > / * PDF file if you can't be embedded, indicate that the browser does not support PDF preview, given path, Click on the link to download (server, should not need much configuration, this is the default configuration) */ 2. Using the <embed> tag, this approach is widely supported, but not ubiquitous. Unfortunately, unlike <object>, < Embed > provides an alternative display scheme when the browser does not support it, and the user does not see any information. <embed src="uploads/pdfs/dongxuemin.pdf#page=2" type="application/pdf" width="100%" height="100%"> 3. Using the < iframe > tag, is also widely used < iframe SRC = "uploads/PDFS/dongxuemin pdf# page = 2" width = "100%" height = "100%" > < p > I'm sorry, your browser does not support PDF preview, Please click the link to download the PDF file < a href = "uploads/PDFS/dongxuemin. PDF" > < / a > < / p > < iframe > 4. <object><iframe></iframe></object> Can be compatible with more users < object data = "uploads/PDFS/dongxuemin pdf# page = 2" type = "application/PDF" width = "100%" height = "100%" > < iframe SRC = "uploads/PDFS/dongxuemin pdf# page = 2" width = "100%" height = "100%" > < p > I'm sorry, your browser does not support PDF preview, Please click the link to download the PDF file < a href = "uploads/PDFS/dongxuemin. PDF" > < / a > < / p > < iframe > < object >Copy the code

Why use PDFObject when you can embed PDFS without Javascript? PDFObject2.0 checks if the browser supports inline/embedded PDF.

If you are using dynamic HTML, such as a single-page application, you may need to insert PDF at will. If some browsers don't support PDF embedding and you don't check to see if the browser only displays PDF, you will lose PDF-related content and destroy the UI layout of the page. However, using PDFObject, when you need to embed PDF, you can check whether the browser supports it. If so, you can embed PDF. If not, we do not embed PDF-related tags and use other content instead. Avoid the problems mentioned above. PDFObject2.0 supports NPM. Modern Web applications use NPM to manage packages and dependencies. PDFObject2.0 is registered with NPM, can load PDFObject dynamically and can easily specify Adobe's proprietary 'PDF open parameter '. (Note that these parameters are supported only by Adobe Reader, and most PDF readers ignore the parameters, including the built-in PDF readers in Chrome, Internet Explorer, and Safari, read below.)Copy the code

What doesn’t a PDFObject do? (excerpt from other article translation, really do not want to translate a word again, their English is also very limited…) PDFObject is not a rendering engine. PDFObject simply writes an element to the page and relies on the browser or browser plug-in to render the PDF. If the browser does not support embedded PDF, PDFObject cannot force the browser to render PDF.

If you need to force your browser to display a PDF, we recommend using Mozilla's PDF.js. Note that PDF.js has its own limitations, such as cross-domain security restrictions. PDFObject and PDF.js work well together, and there are links to some great EXAMPLES of pdF.js in the examples below. PDFObject does not provide the ability to customize the appearance of the PDF toolbar. The toolbar is controlled by the browser, and the difference from browser to browser (Chrome vs. Safari, Firefox, etc.) is huge. Some of these browsers provide the ability to open Parmeters via PDF to show or hide toolbars or features, such as search fields. However, in general, browsers do not provide any mechanism for customizing toolbars. If you really need to customize the toolbar, try customizing it for Mozilla's PDF.js to suit your needs. PDFObject does not verify the existence of the PDF, or the actual rendering of the PDF. Assuming you specify a valid URL and that the network is working. PDFObject does not check for 404 errors, and JavaScript cannot detect whether the PDF is actually rendered unless you are using pdF.js that is outside the scope of PDFObject. PDFObject does not magically implement the PDF open parameter. As mentioned above, these parameters are not widely supported. PDF rendering engines support them or not - PDFObject cannot force the rendering engine to implement these features.Copy the code

API PDFObject provide 2 properties and one method: attributes: PDFObject. SupportsPDFs detects whether the browser supports embedded PDF, return true | false. Based on the navigator. MimeTypes [‘ application/PDF] | ActiveX AcroPDF. PDF PDF. | PdfCtrl detection.

PDFObject does not detect is which a third party (such as Adobe Reader, FoxIt PDF. Js) PDFObject. Pdfobjectversion method returns the PDFObject version: Embed (URL, target, options) embed successfully, returns the embedded element object (in most cases returns the <embed> tag, when integrating pdF.js, returns the <iframe> tag) embed failed, Return false as the core of the PDFObject, which provides a lot of functionality and flexibility configuration. Url - PDF address target - can be CSS selector, DOM object, jQuery object options - Configuration object Page - default null. Specify the page of the PDF punch. Id - The default value is null. Embed ('dongxuemin.pdf', '# PDF ', {ID: 'my-pdf'}); <embed SRC ="dongxuemin.pdf" id="my-pdf"> width - default '100%' On the <embed> element, set a style="width: 100%" height-default '100%'. On the <embed> element, set a style="height: /* It is recommended to use CSS to set the <embed> element's size, without setting width and height. height: 100px; } Because: PDFObject automatically appends <embed> -pdfObject target(PDF embedded container) -pdfObject -container so we can use the default 'width: 100%; height: 100%; 'to make <embed> the same size as target. <p>This browser does not support inline PDFs. Please download the PDF to view <a href='[URL]'>Download PDF</a></p>". When the browser does not support embedded PDF, the displayed content 1. Supports HTML tag 2. You can use '[url]' in the content, which is automatically replaced by 'PDF URL' 3 as we fill in. Set to false, if PDF is not supported, nothing will be displayed pdfOpenParams - allows you to specify Adobe's PDF opening parameters /* Specifies the viewer access path for the imported PDF.js PDF viewer forcePDFJS - default false. Whether to force pdF.js to render regardless of the browser's default PDF reader instance: pdfObject.embed ('dongxuemin.pdf'); Pdfobject.embed ('dongxuemin.pdf', '# PDF '); Var options = {height: '300px', pdfOpenParams: {view: 'FitV', page: '2'},}; PDFObject.embed('dongxuemin.pdf', '#pdf', options); // Specify the configuration objectCopy the code

Refer to the article: www.cnblogs.com/iPing9/p/71…