Hello, everybody. The first half of the year is very busy, has not sent an article, there is an elder brother to think of me. These days I found that some people have been asking me about PDF in private messages.

Well, in order for me to feel at ease, I’m going to write an article explaining how to use PDFJS.

What is pdf.js?

PDF. Js is supported by Mozilla. The goal is to create a common, Web-based standards-based platform for parsing and rendering PDFs.

Preview the PDF

Open with iFrame, Embed, and a new window

Test address, the scheme is relatively simple, belong to see the day to eat, all rely on the browser father.

use

<embed src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6 %A5%A0_.pdf">
<iframe src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6 %A5%A0_.pdf"></iframe>

The test results

The browser compatibility Figure captions
Chrome (PC) (Mac) support
Safari on PC (Mac) support
Firefox for PC (Mac) support
Firefox for PC (Windows) support
Edge (PC) (Windows) support
IE (PC) (Windows) Does not support
WeChat (Android) (Vivo X27) Does not support
Chrome (Android) (Vivo X27) Does not support
QQ Browser (Android) (Vivo X27) Does not support

Pros: Simple, supports most PC browsers (IE does not). Cross-domain resources are also available (without CORS) Disadvantages: Mobile browsers are not supported, and lower versions of browsers such as Internet Explorer are not supported. The style cannot be customized.

pdfjs-view

Test address, solution compatibility is better, the need for resources with the domain or CORS across the domain, you can define the style.

use

  1. Deploy a pdfjs-view yourself. (Recommended, more stable)

    1. Download the project, and then divide the project into two versions/web/viewer-1.html 和 /legacy/web/viewer.html. Legacy supports a lower version of the browser, written in ES5, so it makes sense to use this solution, and you’re sure to be compatible with all browsers. (If not, justgulp generic-legacyGenerate a copy)
    2. Then copy the relevant content to your directory and upload the FTP.
    3. It’s essentially an HTML file, so you can make some changes to it, such as theme colors, hide download buttons, etc.

  2. Use CDN or official provided pdfjs-view. (Not recommended, unstable, exception CORS)

    1. https://mozilla.github.io/pdf.js/legacy/web/viewer.html
    2. https://mozilla.github.io/pdf.js/web/viewer.html
<iframe src="https://www.lilnong.top/static/project?file=https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9 A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>
<iframe SRC = "https://www.lilnong.top/static/project/pdfjs-es5-2.5.207/web/viewer-1.html?file=https://www.lilnong.top/static/pdf/ B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>

The test results

The browser compatibility Compatibility with ES5 version Figure captions
Chrome (PC) (Mac) support support
Safari on PC (Mac) support support
Firefox for PC (Mac) support support
Firefox for PC (Windows) support support
Edge (PC) (Windows) support support
IE (PC) (Windows) Does not support support
WeChat (Android) (Vivo X27) support support
Chrome (Android) (Vivo X27) support support
QQ Browser (Android) (Vivo X27) support support

As above, you can see that IE is supported and mobile terminal is also OK.

Advantages: support most browsers (PC, M terminal support). Cross-domain resources require CORS. Styles can be customized. Cons: Need to deploy a View.

pdfjs-canvas

Test address, the scheme is more complex, need to achieve their own set of preview supporting content (paging, zoom in and out).

use

(function() { let el = document.getElementById('canvasWrap'); if (! el) { el = document.createElement('div') el.id = 'canvasWrap' document.body.appendChild(el) } el.innerHTML = '' let winW = document. DocumentElement. ClientWidth / / loading PDF resources let loadingTask = pdfjsLib.getDocument('https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9% BE%99%E9%80%B8%E6%A5% a0_.pdf ') // PDF load completed callback. LoadingTask.promise. then(function(PDF) {console.log(' PDF ', PDF) // To get the total number of pages. let pageNum = pdf.numPages var _pageNum = 1; var renderPageToCanvas = function(pageNum, Auto =false) {// Get one of the pages pdf.getPage(PageNum). Then (function(Page) {// You can now use * Page * here _PageNum = PageNum Var viewport = page.getViewport({scale: 1,}); var scale = (500 / viewport.width).toFixed(2) viewport = page.getViewport({ scale: scale }); var canvas = document.createElement('canvas'); el.appendChild(canvas) var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; Var renderContext = {canvasContext: context, viewport: viewport}; var renderContext = {canvasContext: context, viewport; page.render(renderContext); if (auto) renderPageToCanvas(pageNum + 1, auto); }); } renderPageToCanvas(_pageNum, true); canvasPrev.onclick = function() { renderPageToCanvas(Math.max(_pageNum - 1, 1)); } canvasNext.onclick = function() { renderPageToCanvas(Math.min(_pageNum + 1, pdf.numPages)); } }, function(reason) { console.error(reason) }) } )()

The test results

The browser compatibility Figure captions
Chrome (PC) (Mac) support
Safari on PC (Mac) support
Firefox for PC (Mac) support
Firefox for PC (Windows) support
Edge (PC) (Windows) support
IE (PC) (Windows) Does not support
WeChat (Android) (Vivo X27) support
Chrome (Android) (Vivo X27) support
QQ Browser (Android) (Vivo X27) support

Compatibility is also OK, relying on Canvas.

Download the PDF

  1. Download the head

  2. Directly open

    1. The download can be triggered if the browser does not support parsing the PDF.
    2. If the browser supports parsing the PDF, it will become a preview.
    1. At this point we can add the “a” tag to trigger the download. (Need to be codomain)

To summarize

Through the above content we can achieve the front-end preview PDF function, let’s summarize the characteristics of each scheme.

plan The mobile terminal PC side (high version browser) PC side (IE, lower version browser) Cross domain Duplicate content Custom styles (paging, downloading, etc.)
iframe ❌(platform not supported) ✅ ❌(platform not supported) ✅ ✅ ❌
embed ❌(platform not supported) ✅ ❌(platform not supported) ✅ (CORS) ✅ ❌
pdfjs-view ✅ ✅ ❌(new ES6 feature) ✅ (CORS) ✅ ✅ (based on the original basis to modify)
pdfjs-view-es5 ✅ ✅ ✅ ✅ (CORS) ✅ ✅ (based on the original basis to modify)
pdfjs-canvas ✅ ✅ ❌ (canvas) ✅ (CORS) ❌ (canvas) ✅(a complete set of actions to implement yourself)

Okay, what else do you need? Please leave a comment. I’ll update it inside.