PDF Preview plug-in

(I) Version introduction

  • Common version V2.8.335
  • The size of 11.4 MB
  • Not compatible with older browsers
  • Compatible with version V2.8.335
  • The size of 14.0 MB
  • Compatible with older browsers

(2) Description of advantages

  • Deployment is quick to use without development
  • You only need a Web environment to run
  • Rotate, directory, download, preview, zoom and other rich functions
  • Mobile PC automatic adaptation
  • Local files, PDF suffix links, PDF download links are available

(3) Description of shortcomings

  • High function concentration, customization and modification is more troublesome
  • Large file (but independent of the project)
  • Cross – domain pre-need to annotate a few lines of source code solution

Method of use

1. Download the plug-in

Download address

// You can choose whether to use the lower browser compatible version. http://mozilla.github.io/pdf.js/getting_started/#downloadCopy the code

2. Copy the plug-in

Unzip the downloaded plug-in and copy the entire project folder

3. Deploy the plug-in

(I) Front-end subrack deployment (for example, VUE)

  1. Copy the entire folder to the public directory
  2. Modify the plugin name such as pdfView
  3. After running the front-end project, access via the link:
/ / access links to http://localhost:8080/pdfView/web/viewer.html? File = link or address / / PDF suffix remote file or PDF download link / / url need encodeURIComponent () code http://localhost:8080/pdfView/web/viewer.html? File = url / / / / public local files directly from the local address access / / such as access: / public/file/test. The PDF files at http://localhost:8080/pdfView/web/viewer.html? file=/file/test.pdfCopy the code

(II) Access and use within the project page

// The width and height need to be defined<frame src="Http://localhost:8080/pdfView/web/viewer.html? File = file link or address"/>
Copy the code

(3) Deployment in other Web environments

  1. Put it directly into the Web project directory and access it through the website link
http://domain name /pdfView/web/viewer.html? File = File link or addressCopy the code

(4) Cross-domain solution

Comment the plugin viewer. Js with the following content

// if (origin ! == viewerOrigin && protocol ! == "blob:") {
// throw new Error("file origin does not match viewer's");
// }
Copy the code

(5) Preview the parameter document after the URL of the plug-in

https://github.com/mozilla/pdf.js/wiki/Viewer-options
Copy the code

More front-end content welcome to pay attention to the public number: day small day personal network