vue-pdf-search-viewer

Pdf viewer base on Vue.js and Pdf.js, support pdf view, search by keyword and change page.

Step1 Install

npm install --save vue-pdf-search-viewer

Step2 Config webpack or vue.config(below is vue.config)

//vue.config.js

module.exports = {
   chainWebpack: config => {
   
    //...your configs
    
    config
      .plugin('copy')
      .tap(args => {
        args[0].push(
          {
            context: 'node_modules/vue-pdf-search-viewer/lib/',
            from: '*.umd.min.*.js',
            to: 'js/',
            toType: 'dir'
          },
          {
            from: 'node_modules/vue-pdf-search-viewer/lib/pdf.worker.js',
            to: 'pdf.worker.js',
            toType: 'file'
          },
        )
        return args
      })
  }
}

Step3 Import and register

//main.js

import PdfViewer from 'vue-pdf-search-viewer'

Vue.use(PdfViewer)

Example

<template>
  <pdf-viewer src="./compressed.tracemonkey-pldi-09.pdf"></<pdf-viewer>
</template>
 

API

| Props | Type | Description | |-------------|-------------|-------------| | src | string or other(detail to see pdf.js getDocument()) | Pdf url | | autoWidth | boolean, default false | Whether to zoom pdf to container width when initial |

| Events | Parameters | Description |
|-------------|-------------|-------------| | on-loaded | number | Pdf total page number | | on-search | object: { current, total } | Search keyword matched current number and total count |
| on-page-change | number | Current page number |

| Methods | Parameters | Description | |-------------|-------------|-------------| | search | string | Search keyword in pdf | | searchAgain | param1:string, param2: boolean | Param1 is search keyword, param2 is dicided to find pre(true) or find next(false)|
| cancelSearch | none | Cancel search | | zoom | number/ string('auto') | Number: The ratio of pdf zoom, 'auto': zoom to container width | | jumpToPage | number | The page number of pdf jumped to |