Recently, due to business requirements, I needed to preview the PDF in the project and search for text highlighting in the PDF. I am untalented and uneducated, the Internet to check a lot of information, but the online information about this aspect is too little, the whole three days the whole out. The record is here for future study

The first kind of vue – PDF

GitHub github.com/FranckFreib is a simple PDF preview plugin, which is also recommended by the Vue plugin library.

The second PDFJS – dist

The build version of pdf.js I used is [email protected]

rendering

The first rendering method

Create a canvas tag to host the PDF, and then render the PDF to the canvas tag by using pdf.render()

Refer to the link

Juejin. Cn/post / 692014…

Second rendering method

Use pdF. js with the preview PDF viewer

create

import pdfjs from "pdfjs-dist"; import { PDFLinkService, PDFViewer, PDFFindController } from "pdfjs-dist/web/pdf_viewer"; import "pdfjs-dist/web/pdf_viewer.css"; import pdfjsWorker from "pdfjs-dist/build/pdf.worker"; pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker; /* loadPdf file */ loadPdf(url) {const linkService = new PDFLinkService(); const findController = new PDFFindController({ linkService, }); let _this = this; // PDFSinglePageViewer // PDFViewer multipage controller const newViewer = new PDFViewer({container: _this.$refs.containerRef, // display PDF container dom linkService, // do not understand but must useOnlyCssZoom: True, // No You can use CSS to control the zoom of the page. The default is false Renderer :' SVG ', // how to render optional canvas and SVG findController, // text findController}); linkService.setViewer(newViewer); / / zoom newViewer currentScaleValue = "page - width"; Pdfjs.getdocument (url).promise.then((PDF) => {if (PDF) {// total pages _this.numPages = pdf.numPages; newViewer.setDocument(pdf); linkService.setDocument(pdf); // global newViewer _this.newViewer = newViewer; _this.interval = setInterval(() => {_this.loadCompletepdf (); }, 100); }}); },Copy the code

Note that the above method registers a single-page preview PDF viewer

  • PDFViewer creates an object that previews a multi-page PDF
  • PDFSinglePageViewer creates preview single page PDFS with the same object parameters as PDFViewer
  • PDFLinkService I don’t know what it does but it’s required, okay
  • PDFFindController Word search controller

There are other objects such as DownloadManager, download controller and so on, which are not used here. For details, you can check the source code of PDF.js.

New PDFSinglePageViewer({}) Has some other parameters besides those written in the code above, as follows

  • MaxCanvasPixels Maximum Canvas pixel
  • EnablePrintAutoRotate Enables print rotation

There are also properties that can be accessed directly through the newViewer object, as follows

  • PagesCount total number of pages
  • PageViewsReady Indicates whether all pages are rendered, because PDF rendering is asynchronous and some events are listened after rendering is completed
  • CurrnetPageNumber Indicates the current page number
  • CurrentScale Scale to scale the page using currentScaleValue
  • PagesRotation Page rotation
  • IsPageVisible (pageNumber) passes the pageNumber to check whether the page is invisible

HTML corresponding to the code above

<div id="viewerContainer" class="viewerContainer" ref="containerRef">
    <div id="viewer" class="pdfViewer"></div>
 </div>
Copy the code

Turn the page

Page is the value of change currnetPageNumber enclosing newViewer. CurrentPageNumber = num;

The zoom

Scaling is the value of change currentScaleValue enclosing newViewer. CurrentScaleValue = “page – width”

Text search

this.newViewer.findController.executeCommand("find", this.searcher);

To find the parameters
PhraseSearch: true, // findPrevious: undefined, // find highlightAll: True, // whether to highlight caseSensitive: false, // case-sensitive entireWord: false, // the entireWordCopy the code

Note that findAgain is passed to locate the lookup field

I’ll stop here and I’ll add anything I need to add later

The resources

zhuanlan.zhihu.com/p/136565799

Github.com/mozilla/pdf…